# Alder & Arc — immersive 3D landing page

Build a production-ready immersive 3D landing page inspired by the supplied Alder & Arc reference. Use plain HTML, CSS, JavaScript, and Three.js in one semantic DOM page with one shared animation loop. The implementation should feel quiet, spacious, editorial, and authored rather than like a generic 3D template.

## Content

- Brand: Alder & Arc
- Navigation: Home, Product, About, Blog, Contact
- Primary header button: Enter the studio
- Headline: Make room for better ideas.
- Description: A quiet digital studio for shaping thoughts into work you can stand behind.
- Main button: Enter the studio
- Scroll cue: scroll to explore

Use Cormorant Garamond for the headline and brand, and Inter for navigation and supporting text. Keep the headline centered, elegant, spacious, and readable above the meadow. Animate the headline lines in gently during entrance.

## Visual system

Use a deep green palette:

- Page background: `#0d2418` to `#28563b`
- Hero background: `#081f16` to `#254633`
- Dark forest-green shadows
- Muted sage highlights
- Warm cream-white typography
- Restrained amber glow around buttons and scroll indicators
- Subtle green atmospheric gradients, grain, haze, and vignette

## Three.js scene

Build the scene procedurally. It may contain only:

- Dense instanced meadow grass across the lower frame
- Dark green tapered grass blades
- Pale cream and warm-white glowing flowers or stars
- Subtle drifting fireflies
- Textured green ground extending toward the camera
- Atmospheric haze and restrained lighting

Do not render people, heads, black spheres, desks, glowing rectangular panels, laptops, books, tables, props, furniture, procedural characters, or the red annotation circles from the reference. The composition is meadow, grass, flowers, stars, fireflies, ground, atmosphere, and interface only.

Use deterministic seeded randomness. Cap DPR at 2 on desktop and reduce quality on mobile. Keep near-camera grass controlled with depth-aware blade length, and add enough foreground grass to cover the lower edge of tall viewports.

## Layout and interaction

Use this layer order:

1. Green atmospheric background
2. Soft bleed and vignette
3. Sky gradients
4. Three.js meadow canvas
5. Grain overlay
6. Headline, copy, buttons, navigation, and scroll rail

Keep the hero pinned to the viewport through a four-stage scroll story without hijacking scrolling:

1. `scroll to explore` — calm meadow introduction
2. `follow the thread` — gentle camera movement through the field
3. `shape the signal` — shift the camera and grass perspective
4. `step into the work` — settle into the final meadow composition

Use normalized scroll progress, smooth easing, one shared `requestAnimationFrame` loop, meaningful camera and scene movement, and a four-dot scroll rail that reflects the active stage. Update the cue text with the active stage. Respect `prefers-reduced-motion` by disabling automatic movement while leaving the final visual state visible.

Add restrained desktop-only pointer parallax with normalized pointer coordinates, eased motion, gentle grass reaction, and a smooth reset on pointer leave. Do not add touch parallax.

Navigation and buttons must be real accessible HTML elements with visible keyboard focus states. Keep the HTML headline, description, navigation, and buttons usable without JavaScript or WebGL. Provide graceful fallback content if WebGL fails.

## Responsive and quality requirements

Implement a responsive layout function that recalculates the camera, renderer, canvas, terrain, grass density, and prop-free composition on resize. Verify all of these conditions:

- At `1911×1943`, the meadow reaches the lower edge with no empty band.
- At `1280×720`, the headline, meadow horizon, and lower grass keep the intended proportions.
- At `390×844`, copy stays readable, the meadow fills the lower frame, and no scene object overlaps the headline or CTA.
- There is no horizontal overflow.
- All four scroll stages change the scene and scroll rail meaningfully.
- There are no console errors.
- Unwanted circled objects are absent.

The complete runnable source and local runtime are available in the paid MotionWiki Vault package. This public prompt is the implementation brief; it does not include the protected source drop.