Vault - DeFi Landing

Cinematic dark landing page for Framer

A single-page, motion-rich template with seven animated sections, scroll-scrubbed storytelling, interactive canvas fields, and a live WebGL footer. Built with React and Framer only — zero dependencies.

### Features

- Hero with self-drawing chart, rolling odometer, hover crosshair, and 3D cursor tilt

- Velocity-coupled logo marquee that speeds with scroll and eases on hover

- Slot-reel statistic counter with giant outlined parallax rows

- Pinned Features section that scrubs forward and reverse with scroll (no snapping)

- Product cards and CTA band

- Pluckable string-art canvas fields in the hero and CTA that react to the cursor

- Live WebGL footer scene (orb, light beam, water reflection, drifting mist) with CSS fallback

- Reduced-motion support across all sections

- Subtle, colourless hover states

74 property controls expose every string, link, colour, and timing value. Fully commented code components.

### What’s included

- 1 page, 3 breakpoints (1440 / 810 / 390) with fluid container queries

- 7 code components

- 74 property controls

- No CMS

- Fonts: Lora (display), Inter (UI/body), IBM Plex Mono (meta) — all free Google Fonts (SIL OFL)

- No external dependencies

- 3 replaceable raster images; all other graphics are inline SVG/WebGL

### Known limitations

- Single page only — no blog, CMS, or additional layouts.

- Motion-heavy (WebGL footer + canvas loops). Tested in-browser; not yet profiled on mid-range phones or laptops. Verify performance on target devices.

- Features section requires Overflow: Visible on parent frames (transform fallback included — see readme).

- Dark-only by design; no light/dark toggle.

Drop in, customise via property controls, and launch. All components are fully commented.