Live page · scroll inside

Premiumcoding bootcamp · dark · landing page · gsap · lenis · html

Hexbridge

A coding-bootcamp site in blue-black and honey yellow: a monospace headline with a block cursor over a strip of cohort facts, a pinned twelve-week rail where each week types its code into an editor and swaps a preview to what the code produces (a live click counter, a fetch result, a query table, a seat grid, a filterable task list, a test run, a deploy log), outcome figures with a graduate's quote, a cohort table with three ways to pay and a plain FAQ.

What's inside

01
Mono bar with a hex mark
Turns translucent after 80 px.
02
Mono headline with a cohort strip
H1 lines rise from masks; the cursor blinks six times and stops; the strip cells rise in turn; the seats-left figure counts down from 18.
03
Pinned twelve-week rail with live code
Scrolling moves through the weeks: the rail marker and progress line advance, the code clears and types in at about 60 characters per 100 ms, and the preview crossfades to the new output; the counter and task filter in the preview are live; clicking a week jumps there.
04
Outcomes with one graduate quote
Figures count up; the quote's lines rise from masks.
05
Cohort table and ways to pay
Rows and columns rise in turn.
06
Plain FAQ
Rows rise in turn; the plus rotates on open.
07
Minimal footer
None.

Utility pages in the same file: 404 · Style guide · Password · Changelog

How to use it

From prompt to a live page.

01
Walk the page
The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.
02
Pick a palette
Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.
03
Pick your stack
Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.
04
Copy the prompt
It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.
05
Make it yours, then iterate
Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.

More templates

Free♥ 0

Abacus

Accountancy practice

Template

Premium♥ 0

Kittiwake Air

travel/regional airline

Template

Premium♥ 0

Laneline

sport/mobile app

Template

Free♥ 0

Beacon

Feature flags

Template

Loading…

Hexbridge

What's inside

Mono bar with a hex mark

Turns translucent after 80 px.

Mono headline with a cohort strip

H1 lines rise from masks; the cursor blinks six times and stops; the strip cells rise in turn; the seats-left figure counts down from 18.

Pinned twelve-week rail with live code

Scrolling moves through the weeks: the rail marker and progress line advance, the code clears and types in at about 60 characters per 100 ms, and the preview crossfades to the new output; the counter and task filter in the preview are live; clicking a week jumps there.

Outcomes with one graduate quote

Figures count up; the quote's lines rise from masks.

Cohort table and ways to pay

Rows and columns rise in turn.

Plain FAQ

Rows rise in turn; the plus rotates on open.

Minimal footer

None.

How to use it

From prompt to a live page.

Walk the page

The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.

Pick a palette

Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.

Pick your stack

Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.

Copy the prompt

It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.

Make it yours, then iterate

Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.