IAD Lab Interactive Event Landing

Overview

This is a highly immersive, interactive event landing page for IAD Lab, designed to showcase interaction design expertise through a dark-themed, motion-rich experience. It is a premier clone reference for developers wanting to integrate Three.js WebGL backgrounds with Svelte-powered reactive UI and scroll-triggered animations.

Design System

• Color Palette & Visual Hierarchy: A monochromatic deep-gray/black background allows the white typography and translucent UI elements to lead the visual hierarchy. Grayscale gradients and blurs are used extensively for depth and focus transitions.
• Typography: The site uses a clean, sans-serif font system with a focus on large-scale headlines and character-level reveal animations (e.g., the "Imagine" and "14Nov25" headers). Emphasis is created through font weight and high-contrast letter spacing.
• Page Structure: The layout follows a linear narrative: a full-screen WebGL hero -> animated date/theme reveal -> detailed event description -> vertical timeline program -> ticket pricing blocks -> logistical info -> archival list.
• Reusable Components:
  • ProgramEntry: A timeline item featuring room tags, time indicators, and expanding content areas.
  • Tickets__item: A minimalist pricing card with clear CTAs.
  • Archive__item: A list-based navigation component for historical links with interactive hover states.
  • TitleSection: A fixed-position, scroll-reactive navigation/status element that transitions text as the user moves through sections.
• Interaction & Motion: The core experience is driven by "scroll-jacking" and parallax effects. Elements use CSS filter: blur() and opacity transitions triggered by scroll position. Letter-by-letter reveal animations on headings provide a high-end, cinematic feel.
• Implementation Clues: Built using Svelte (indicated by svelte- scoped classes) and Three.js r149 for the 3D canvas background. The DOM structure uses ARIA attributes (aria-hidden) to handle accessibility for animated text.

Use Cases

• Who should clone this: Creative studios, design conferences, and tech product launches looking for a high-fidelity, "less-is-more" landing page.
• Remix Directions: Adapt the Three.js background to a different particle system or 3D model while keeping the robust scroll-linked UI; swap the event timeline for a product feature list; or use the structured archival list for a portfolio index.
• Recommended Scope: The ProgramEntry timeline and the TitleSection text-reveal logic are the most valuable components to clone individually. For a full-page clone, it is ideal for single-day events or high-impact storytelling sites.