Experiments

Select Animation Style:

Live Demo:

WHY? Record Company

This is how the header will appear with the selected animation

Animation Details:

Current Animation

Simple drop-down with fade. Clean and straightforward, but lacks visual interest.

Performance: Excellent

Notes:

  • Click the buttons above to see each animation style in action
  • Each animation automatically replays when you switch
  • Consider performance on mobile devices when choosing complex animations
  • Blur and glitch effects work best with glassmorphism design theme

ForceNav Layout Presets

Browse preset layouts to use as a starting point, then customize in the editor below.

Current Layout

Custom layout optimized for visual balance (Production)

Home
Artists
Releases
Collections
Contests
Merch
Products
Live
Nexus
@
Contact
Info
Admin

Layout Editor

Fine-tune icon positions and sizes. Changes are reflected in real-time. Copy the JSON when you're done to use in ForceNav.js.

Select Icon to Edit

Position: Home

Icon Sizes (px)

All Icons Quick Edit

Desktop Preview
Home
Artists
Releases
Collections
Contests
Merch
Products
Live
Nexus
@
Contact
Info
Admin

Export Configuration

Copy this JSON and provide it to Claude to update ForceNav.js

{
  "sizes": {
    "large": 100,
    "medium": 56,
    "regular": 44,
    "small": 32
  },
  "desktop": [
    {
      "x": 41,
      "y": 38,
      "label": "Home"
    },
    {
      "x": 25,
      "y": 29,
      "label": "Artists"
    },
    {
      "x": 73,
      "y": 70,
      "label": "Releases"
    },
    {
      "x": 77,
      "y": 39,
      "label": "Collections"
    },
    {
      "x": 55,
      "y": 52,
      "label": "Contests"
    },
    {
      "x": 33,
      "y": 58,
      "label": "Merch"
    },
    {
      "x": 60,
      "y": 29,
      "label": "Products"
    },
    {
      "x": 44,
      "y": 18,
      "label": "Live"
    },
    {
      "x": 16,
      "y": 52,
      "label": "Nexus"
    },
    {
      "x": 50,
      "y": 72,
      "label": "Contact"
    },
    {
      "x": 20,
      "y": 69,
      "label": "Info"
    },
    {
      "x": 87,
      "y": 59,
      "label": "Admin"
    }
  ],
  "mobile": [
    {
      "x": 44,
      "y": 34,
      "label": "Home"
    },
    {
      "x": 32,
      "y": 18,
      "label": "Artists"
    },
    {
      "x": 56,
      "y": 69,
      "label": "Releases"
    },
    {
      "x": 44,
      "y": 50,
      "label": "Collections"
    },
    {
      "x": 78,
      "y": 55,
      "label": "Contests"
    },
    {
      "x": 69,
      "y": 39,
      "label": "Merch"
    },
    {
      "x": 28,
      "y": 65,
      "label": "Products"
    },
    {
      "x": 24,
      "y": 39,
      "label": "Live"
    },
    {
      "x": 58,
      "y": 23,
      "label": "Nexus"
    },
    {
      "x": 81,
      "y": 76,
      "label": "Contact"
    },
    {
      "x": 35,
      "y": 83,
      "label": "Info"
    },
    {
      "x": 88,
      "y": 93,
      "label": "Admin"
    }
  ]
}

How to Use This Editor

  1. Choose a preset above as your starting point, or start fresh
  2. Switch between Desktop/Mobile tabs to configure each layout
  3. Select an icon from the dropdown or click it in the preview
  4. Adjust X/Y sliders to position the selected icon (5-95%)
  5. Adjust size sliders to change icon sizes for each tier
  6. Copy the JSON when finished
  7. Share with Claude with the prompt: "Update ForceNav.js with this layout configuration: [paste JSON]"

Size Tiers

  • Large: Artists, Releases (primary navigation)
  • Medium:Collections, Contests, Products, Merch
  • Regular:Home, Live, Nexus
  • Small: Contact, Info, Admin

Tips

  • Keep important icons (Artists, Releases) well separated
  • Leave ~10% margin from edges for the force simulation variance
  • Mobile layout should be more vertically oriented
  • Test at different screen sizes after applying changes

Icon Preview

All navigation icons used in ForceNav

HomeHome page
FingerprintArtists
DotReleases
HoneycombCollections
StarContests
MerchMerch
CubeProducts
PlayLive
BlockchainNexus
@
AtSignContact
QuestionInfo
GearAdmin