The Other Side of Truth Narrative Scroll

Overview

This project is a high-impact narrative scrollytelling website that leverages deep-scrolling interactions to deliver a powerful message. It is an excellent reference for builders wanting to implement complex GSAP scroll animations, pinpointed pinning effects, and layered content reveals within a Nuxt.js environment.

Design System

• Color Palette & Visual Hierarchy: A stark, high-contrast palette of solid blacks, industrial yellows (#FFEB3B type), and deep blues create an urgent, editorial feel. The hierarchy uses massive, ultra-bold typography for key statements, contrasted with smaller, monospace-adjacent technical data.
• Typography: Heavily features a sans-serif headline font with ultra-bold weights (class h1-ultrabold) for impact. Body text uses cleaner, highly legible sans-serifs with justified alignment (justify-line) to mimic newspaper layouts.
• Page Structure & Flow: The sequence starts with a preloader and a word-based hero screen, leading into a series of pin-spacer sections where content remains fixed while child elements (like social media cards or image galleries) move or rotate. The flow transitions between light (yellow) and dark sections to separate different narrative beats.
• Reusable Components:
  • city-card: A flexible card for media and metadata with border-accent options.
  • fund-card: A minimalist link card for directories or resources.
  • label: Data-driven markers used to annotate specific sections of images or maps.
  • traitors-spinner: A vertical list component that scrolls names or items synchronized with a background map or image.
• Motion Patterns: Sophisticated use of GSAP to handle word-by-word text reveals, image rotation on scroll (transform: rotate), and "staggered" reveals for scattered components. The implementation uses sticky positioning and large padding inside pin-spacer containers to control the scroll duration of specific scenes.
• Implementation Clues: Built using Nuxt.js (noted by __nuxt and data-v- attributes). It utilizes video backgrounds and picture tags for responsive media delivery. Transitions are managed through visibility toggles and CSS transforms.

Use Cases

• Who should clone this: Developers building digital storytelling experiences, annual reports, historical timelines, or interactive advocacy campaigns that require a non-linear information flow.
• Effective Remixes:
  • Product Launches: Use the "scattered cards" section to showcase social proof or customer testimonials.
  • Portfolio: Adapt the destructions-gallery for a portfolio grid where projects reveal themselves dynamically on scroll.
  • Data Visualizations: Reuse the labels and pinned statistics to explain complex charts or map data.
• Suggested Clone Scope: For a quick win, clone the card components and the sticky text reveal logic. For a full-page clone, focus on the GSAP timeline structure to maintain the coordinated narrative rhythm.