Endel Manifesto Animated Storytelling Page

Overview

This site is a high-impact, minimalist storytelling experience designed for a product manifesto. It uses a "scrollytelling" approach where large typography, plenty of whitespace, and synchronized animations (placeholder Lottie/SVG files) guide the user through a narrative rather than a traditional feature list. It serves as an excellent reference for builders wanting to create premium, immersive landing pages that prioritize brand philosophy over utility.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast monochromatic palette with a solid black background (#000000) and white text (#FFFFFF). The hierarchy is established through extreme scale, with massive headings used to make philosophical points, while secondary body text is kept smaller and slightly less bright for readability.
• Typography: The system relies on a clean, geometric sans-serif font. Layouts are strictly centered, creating a focused, editorial feel. Large font sizes are used for the main narrative arcs, transitioning into smaller paragraphs for supporting details.
• Page Structure & Flow:
  1. Hero Header: A centered logo (.Preview_logo__2mGRn), a manifest headline, and a single darkened call-to-action button.
  2. Block-Based Narrative: Each section (e.g., .Bodies_base, .InfoOverload_base) follows a consistent pattern: a centrally placed animation followed by a bold title and occasional body text.
  3. The Marshall Quote Section: A unique layout utilizing a split graphic/text block to emphasize external credibility.
  4. Footer/App Hub: A final section containing vertical stacks of platform links (App Store, Google Play, Alexa) and social links.
• Reusable Components:
  • Animation Wrapper: The .Animation_base container is a standardized block for housing Lottie or SVG animations with specific overflow and height properties.
  • Standardized Text Blocks: Sets of CSS classes for .title and .text that maintain consistent margins and line-heights across disparate narrative sections.
  • Icon Distribution Grid: The footer uses a flexible horizontal/vertical list for various platform-specific download links.
• Implementation Clues: The HTML structure uses Next.js (indicated by # __next) with CSS modules (hashed classes like Preview_base__2qwVa). This modular approach ensures that each "thought" or section of the manifesto is self-contained with its own layout logic.

Use Cases

• Who should clone this pattern: Brand designers launching a new product philosophy, startups releasing a "Vision" document, or creative agencies portfolios looking for a dramatic entry experience.
• What products can remix it effectively: Wellness apps, AI-driven tools where "magic" is a selling point, or any premium hardware product where storytelling is prioritized over technical specs.
• Practical remix directions:
  • Swap Animations: Replace the abstract SVG/Lottie placeholders with 3D models or product renders.
  • Color Inversion: Remix this into a light-themed version (white background, black text) for a more "clinical" or "high-fashion" aesthetic.
  • Focus on Sections: A builder might only clone the .Future_socials grid for a clean footer or the .Marshall_animation layout for emphasized testimonials.
• Suggested clone scope: A full-page clone is best for a cohesive narrative, but individual sections (the centered header or the animation-text block) can be easily extracted for use as specific sections within a larger, more traditional landing page.