Stillform — Room for Thought

Create Stillform, a fictional design practice, using React and TypeScript. Preserve a restrained white editorial opening with original alpine imagery, then build a complete scroll-driven page.

Use locally hosted Instrument Serif for the logo and headline and Inter for navigation and body copy. Pair deep forest-green text with a cool green-white canvas and a pale-green closing panel. Reserve pill-shaped CTAs for the closing invitation.

Navigation: a clear Stillform wordmark with a small abstract lens symbol, The practice, Our approach, and a Let’s talk action. Controls scroll to real sections within the study. Use generous gutters and a muted green-white canvas with deep forest-green type. Do not use a registered trademark symbol.

Headline: "Room for thought. Form for what’s next." Set thought and what’s next in muted green italic. Use fluid display type capped at 96px desktop and approximately 46px mobile, line-height 1.04, letter-spacing -0.025em.

Description: "Distinct identities. Thoughtful digital experiences. A little space to see things differently." Follow with an understated Find a new perspective action and an arrow. Place a wide, precisely cropped landscape aperture beneath the opening.

Create original cinematic alpine lake artwork, with a pale sky, jade water, pine forests and misty limestone peaks. Render a gentle 12-second camera push-in as a locally hosted, muted, inline background video. Begin with a precisely cropped rectangular aperture in the lower half of the hero; expand all four edges until the scenery fills the stage.

Keep the opening visible immediately. Let scrolling move the headline lines through individual masks in a staggered sequence. Hover interactions use a subtle arrow translation and a drawn navigation underline. Use requestAnimationFrame to fade the video in over the first 0.5s and out over its final 0.5s. On ended, wait 100ms, reset currentTime, then play again.

Add an original three-stage native scroll journey with a scoped GSAP ScrollTrigger timeline and about 0.65 seconds of scrub smoothing. Native sticky positioning holds the scene. Mask each opening line upward, expand the photographic aperture to full bleed, gently advance the landscape, and reveal "A clear idea. An open horizon." with a restrained horizon line. Raise a pale-green panel to resolve into "Make space. Leave an impression." and a Meet the practice CTA. Forward and reverse scrolling must work. Do not hijack wheel or touch input; support fullscreen scrolling and clean up every study-owned animation on unmount.

Continue into a practice section with slow image parallax, a pale-green approach section with a sticky heading and three sequential steps whose rules draw as you scroll, and a deep-green contact closing. Keep section copy visible by default. State that this is a fictional Design Lab practice, not a real client. Use one timeline for hero visuals, not simultaneous smoothing engines.

Add an accessible Pause / Play ambient motion control. Pause when offscreen or the page is hidden. With reduced motion, do not load the video or animate the camera; present all three statements as normal-flow, static sections without a long pinned track. Keep all controls and text as real HTML. Scope styles to the study; bundle fonts and media with the site.