Web
Build a single-page cinematic landing for a Web Application Development company where the user’s mouse scroll doesn’t “scroll a page” normally. Instead, scroll drives a story timeline in a pinned full-screen scene. The website should feel like: Apple / premium product launch smooth, slow, “After Effects” motion minimal text, high visual focus 2) Page structure (what the user experiences) The site has one main full-screen scene (Hero Scene). Inside this scene, there are 5 steps that reveal content as the user scrolls. User flow Page loads → you see the hero scene, ship/ball centered, title behind it. Scroll down slightly → ship moves a little + timeline node 2 highlights + text changes. Scroll more → ship continues moving smoothly + node 3 highlights + text changes. Continue until step 5. At the end, either: it transitions into a final “Contact / Start Project” full screen section, or it releases scroll and continues to a normal page section. 3) Layout: exact visual components A) Background Full screen background with a soft gradient sky: top: light bluish/gray bottom: white, like a flat snowy/clean ground Add a subtle purple glow frame around the screen (like your reference). B) Top left navigation (minimal) Small dot icon (black) 2–3 links: Services, Projects, Contact Uppercase, small font, spaced out Keep it low contrast (gray/black, not bold) C) Hero title (center top behind ship) Large title like: “Build WebApps” Where “Build” is thin, “WebApps” is bold. The bold word should appear white and partially behind the ship (layering). The title should feel like a brand mark—big but not cluttered. D) Main object (the “big ship / ball”) Centered horizontally Around upper-middle of screen (not too high) Size: about 35–50% of screen height This object is the hero visual; everything else supports it. E) Call-to-action chip (left side) A pill button like: “Start a Project +” Semi-transparent glass style (blurred background) Positioned left-mid area (near the ship) F) Right side vertical metrics A thin vertical text stack: SPRINT — 01 RELEASE — 1.0 Rotated vertical like reference Very low contrast gray G) Bottom curved timeline (signature element) A curved purple line across the bottom With 5 nodes (dots) on the curve: Discovery UI/UX Build Test Deploy Node 2 and 3 are slightly larger than others (optional), like emphasis. Each node shows small labels underneath: “STEP 01” “Discovery” These labels are subtle and clean. H) Person silhouette (right bottom) A small character/person standing on the ground near the right. Not interactive; just adds story scale. I) Floating button bottom-right Yellow rounded square button with letter/icon (like “A”) Always visible 4) Core behavior (the most important part) A) Scene is pinned When user scrolls: The page does not move up normally. The scene stays fixed. Scroll controls animation progress. B) Scroll “scrubbing” Movement follows scroll like a timeline: not jumpy not too fast should feel heavy/smooth C) Main object motion As you scroll through steps: The ship/ball moves gently left/right and slightly up/down It also rotates slightly and scales subtly Motion should feel continuous, not like “teleporting” Position change per step should be small but noticeable D) Step switching (timeline node + text) At each step: The active node becomes highlighted: glow/shadow slightly larger The text content changes smoothly: fade out, replace text, fade in The text block moves together with the ship (same group), so it never lags or feels detached. E) Mobile behavior On mobile: Same pinned scroll story Ship stays centered Timeline stays visible but simpler Text moves below the ship (not to the side) Ball must remain perfectly round and not become oval 5) Content for each step (Web App Dev themed) Use short, premium copy: Step 01 — Discovery Title: Product Discovery & Planning Body: We map the idea into features, screens, and a clear development roadmap. Step 02 — UI/UX Design Title: UI/UX That Feels Premium Body: Clean layouts, strong UX flow, responsive components and design systems. Step 03 — Development Title: Frontend + Backend Build Body: Secure APIs, databases, user roles, dashboards, payments, and integrations. Step 04 — QA & Security Title: Testing & Hardening Body: Performance, security, monitoring, and reliability checks before launch.