Chainzoku Gaming and NFT Landing Page

Overview

Chainzoku is a high-octane, immersive gaming and NFT landing page that utilizes advanced scroll-driven animations and a maximalist “street-anime” aesthetic. It serves as an excellent reference for builders looking to create lore-heavy storytelling experiences through parallax layering, dynamic color transitions, and character-driven carousels.

Design System

• Color Palette & Visual Hierarchy: The system uses high-contrast, atmospheric tones. Backgrounds transition between deep midnight blue (#background_bk.jpg) and vibrant, faction-specific colors like Oni green (#485229), Bunraku red (#ab0000), and Boso pink (#deafd0).
• Typography: Features a bold, custom display font with a heavy, wavy weight for the hero logo and section headings. Body text uses a clean sans-serif (e.g., "t-body") often rendered with a typewriter-style animation or underlined links for a technical, data-driven feel.
• Structure & Flow: The page follows a narrative flow: a parallax hero area with moving cloud marquees, followed by a story intro video, a character/faction switcher, a card-based vision list, and a horizontal team slider ending in a functional FAQ.
• Reusable Components:
  • Floating Nav: Dual-colored sticky buttons (--white and --black states) that adapt based on the background luminance.
  • Interactive Cards: A cards-list component featuring overlapping layouts and visual stickers.
  • Faction Switcher: Desktop-exclusive horizontal section (home-factions-desktop) that uses color-cuts to differentiate character roles.
• Interaction Patterns: Extensive use of parallax (cloud layers at different data-speed attributes), line-by-line text reveals (js-line and words js-words), and a 3D sticker layer managed via Three.js.
• Implementation Clues: The site is built with Nuxt.js, utilizing a modular data-driven approach to image loading (picture and srcset for responsiveness) and heavy reliance on CSS transforms (translate3d) for smooth performance during scroll-heavy animations.

Use Cases

• Who Should Clone: NFT projects, indie game studios, and high-end street fashion brands wanting a premium, immersive digital presence.
• Effective Remixes: Great for any product requiring a "lore-first" approach where storytelling takes precedence over immediate sales funnels.
• Remix Directions: Replace the high-contrast anime assets with high-fidelity product photography for luxury brands. Adapt the character faction switcher for a service-tier comparison or a multi-department team page.
• Clone Scope: A full-page clone is recommended for high-impact campaign launches, while the vertical/horizontal scroll-reveal logic for the "Clans" section can be extracted as a standalone feature for portfolio pieces.