Dala AI Animated Loading Landing Page

Overview

Dala's landing page is an exceptional example of a high-end, "Apple-esque" dark mode experience that prioritizes heavy motion and atmospheric storytelling. It serves as a premier reference for builders looking to master GSAP-driven scroll orchestrations, complex loading states, and WebGL-enhanced backgrounds to create a sense of premium precision.

Design System

• Color Palette & Visual Hierarchy: The design utilizes a true black background (#000000) with monochromatic white/grey text to create a stark, focused atmosphere. Accent colors are used sparingly for intent: a vibrant yellow (t-yellow) for key highlights and a deep purple (t-purple) for professional metadata in team cards.
• Typography: The system relies on a clean, humanist sans-serif with a diverse scale range. Hero titles use massive sizes up to 150px with tight line-height (0.9), while body text maintains high readability at 24px with wide line-height (1.5). Boldness is varied through weights ranging from 200 (light) to 600 (semi-bold) rather than color changes.
• Structure & Flow: The sequence begins with an immersive loader into a minimalist hero section. It follows a narrative flow: "Manifesto" segments (large-scale typography content blocks) lead into a horizontal team slider, concluding with a grid-based investor section featuring 3D WebGL elements.
• Reusable Components:
  • Animated Loader: A sophisticated site-loader with percentage tracking and a custom four-dot SVG spinner.
  • Horizontal Team Slider: A robust slider (js-slider) that syncs photographic profile cards with separate text content modules.
  • Interactive Buttons: High-contrast, uppercase buttons with a custom hover block effect (btn__hover).
• Interaction Patterns: The site heavily utilizes splitTextRotateIn presets, where text characters or lines rotate and fade in upon scroll. The background features a dedicated <canvas> for WebGL parallax effects (pyramid shapes) that react to user navigation. Scroll-driven movement is managed via asscroll for smooth, inertial scrolling.
• Responsive Behavior: On mobile, the site utilizes mobile-blur classes to maintain focus, while 3D WebGL elements found in the investor section are replaced by static versions (d-none@sm) to ensure performance across devices.

Use Cases

• Who should clone this pattern: Developers or designers launching AI startups, high-end SaaS products, or design agencies where first impressions and perceived technical sophistication are paramount.
• Effective Remixes: This layout is ideal for waitlist-driven launches where the "Manifesto" section can be adapted to explain complex value propositions through digestible, scroll-triggered text blocks.
• Remix Directions: Swap the dark mode for a clinical "Lab White" aesthetic; replace the WebGL cubes with product-specific 3D assets; or decouple the horizontal team slider to use as a portfolio showcase on a standalone page.
• Clone Scope: For a fast setup, cloning the site-loader and the splitTextRotateIn GSAP logic provides the most immediate visual impact. A full-page clone is recommended only if you have high-resolution photography and the technical capacity to manage the WebGL background layer.