Web System
NODAL
A quiet landing page for a data studio where every stone exists twice — raw and alive: a cursor lens reveals the living stone, a switch floods it, and a scroll wipe brings it to life.
Verified rebuild score
Claude Code 100 · Framer 98
Access
Pro
Included
Live demo · Agent prompt for Claude Code and Codex (Vite + TypeScript, no libraries) · Framer Agent prompt with six code components (header, hero lens + switch, method scroll wipe, section titles, case cards, closing stone) · Visual kit: four raw/living stone pairs (WebP + JPG stills, WebM + MP4 loops, posters)
About
What you are rebuilding
A light-grey, typographic site for a fictional data-intelligence studio built on one metaphor: raw data is a bare, cratered stone; clarity is the same stone overgrown with moss and running water. Every stone is a pixel-aligned pair — a still and a looping video — floating on the page with no frame. In the hero a soft lens follows the cursor and shows the living stone; a Raw | Living switch floods the whole stone and makes life the default, so the lens shows the raw rock instead. The method pins a second stone and wipes it from raw to living as you scroll, lighting three steps and counting their numbers up. Three case cards grow their living stone from the point you enter, and the page closes on a living stone half-hidden below the footer. Bricolage Grotesque 300 with italic Newsreader accents in deep moss.
Prompts
Get the prompt for your tool
Claude Code · Codex
Agent prompt
Rebuilds the site in code with the same sections, motion and media. Open an empty folder, start Claude Code or Codex and paste the prompt.
Framer Agent
Framer prompt
Builds the page with native Framer layers, text styles and breakpoints, plus small code components only where Framer has no native option. Open a new Framer project, start Framer Agent and paste the prompt.
