# Lightfall — Crypto & Web3 Hero Section for React with WebGL Background

> A crypto and Web3 hero section for React over a hand-written WebGL light background: neon lanes fall into an order book, a live price ticker pulses the light on every move, and blocks settle like a heartbeat. Six palettes, light and dark themes.

- Kind: Component (Marquees)
- Price: comes with the Pro plan
- License: UpFork Standard License. Use it in unlimited personal and commercial projects. Don't resell or redistribute it on its own.
- Developer: UpFork
- Tags: marquee, background, shader, hero, crypto, web3, hero-section, webgl, animated-background, crypto-ticker, react, nextjs
- npm packages: motion
- Published: 2026-10-09
- Updated: 2026-10-09
- Page: https://upfork.dev/products/crypto-web3-hero-section-react

## How to get it

Install it into a React + Tailwind project with the shadcn CLI:

```bash
npx shadcn@latest add @upfork/crypto-web3-hero-section-react
```

It installs with the member's personal CLI token (UPFORK_TOKEN), made on their UpFork account page. It comes with UpFork's Pro plan and the plans after it.

## About

Lightfall is a hero for an exchange or a Web3 product whose background means something. A hand-written WebGL2 shader pours lanes of neon light down a wall, bends them through a soft cove at the horizon and races them toward you across a floor: order flow falling into the book, settling, and leaving as finality. On top sits a complete hero, and a live market ticker whose price moves pulse the light.

## What it does

- **Price moves, and the light answers.** Every price change in the ticker drops a burst of light down that pair's own lane, rippling the floor where it lands. Call `pulse()` from your trade feed and the light is your market.
- **A block, every heartbeat.** Every few seconds the lanes draw in and speed up, a fine bar of light crosses the horizon, a ring sweeps the floor, and the block counter above the headline flips its digits. Subtle by design.
- **A product-grade hero.** Eyebrow with a live counter, a headline whose accent words take the palette's gradient, CTAs with a light sweep, stats that count up, a trust row, and a quiet hash readout.
- **A real market ticker.** An endless marquee with digit-flip prices, red and green flashes and inline sparklines; it pauses on hover, on focus and with its own button. Feed it an array, a stream (a websocket adapter example is included) or a fetcher; a realistic mock market comes with it.
- **Six palettes.** Tidewater, Ember, Aurora, Orchid, Glacier and Ledger (a bank's idea of neon), crossfaded in OKLab together with the headline, sparklines and focus rings. Bring your own from four colours and an accent.
- **Light, dark and auto.** The light theme draws the same lanes as ink on paper; auto follows your site's `.dark` class or the system.
- **It moves with you.** The pointer moves the camera across three parallax depths and carries a faint lamp; a click drops a pulse; scrolling away raises the horizon, speeds the floor and fades the copy. Phones get a tap-to-cycle palette chip and opt-in tilt.

## Built to ship

Raw WebGL2 and GLSL, no 3D library, rendered in a Web Worker so your page's main thread never waits on the GPU: 21.8 kB gzipped with its shaders. Our demo scores 98+ for performance and 100 for accessibility, best practices and SEO in Lighthouse (desktop), with zero layout shift. Zero React renders per frame. Resolution adapts to keep 60 fps, the loop sleeps off screen, low battery and reduced data lower the effects, reduced motion turns movement into a slow drift, and without WebGL a baked poster takes its place. Text keeps a 4.5:1 contrast against the brightest light that passes behind it, the palette picker is a keyboard listbox, and the ticker has a screen-reader summary.

## What's included

- The `LightfallHero` component in TypeScript, with its own stylesheet (no Tailwind needed)
- `LightfallCanvas` (the shader alone, for any section), `MarketTicker`, `PalettePicker`, `useLightfall`
- A mock market stream and an example websocket adapter
- Four demos: the exchange, a chain launch, daylight (light theme) and the plain background mode
- Twelve no-WebGL posters (six palettes, dark and light)

## Stack and requirements

- React 18 or 19, TypeScript
- `motion` is the only dependency
- Works in the Next.js App Router and in Vite; WebGL2 (every current browser), with a poster fallback