Live page · scroll inside

Freeonline school · light · landing page · gsap · lenis · html

Brightwick

An online-school site on white with a lesson path whose dashed connector draws itself through six zigzag lesson cards as you scroll, a live progress ring in the hero, flip-card course tracks, mentor cards, an outcomes band and a pay-toggle that morphs the price.

Placeholder photos by Sincerely Media, Kit (formerly ConvertKit), Brands&People, Kelly Sikkema, Mikey Harris and JESHOOTS.COM on Unsplash. Replace them with your own before launch.

What's inside

01
Ring preloader
The ring's arc draws to 100 % over 1.2 s, the name rises, the slab lifts and the hero intro begins.
02
Fixed bar with cohort pill
Turns translucent white with a blur after 80 px; link underlines draw in the accent.
03
Hero with live progress ring
Lines rise from masks; the photo settles from 1.08; the card pops in with back.out and its ring draws to 24 % while the number counts; the card floats up 6 px and back once and tilts slightly toward the pointer.
04
Lesson path with drawn connectors
The connector path draws itself (stroke-dashoffset) as the section scrolls, scrubbed; each node pops (scale 0.8→1, back.out) with its disc filling the accent when the drawing pen reaches it; the cards tilt 2° toward the pointer on hover.
05
Flip-card course grid
Cards rise in with a stagger; hovering (or tapping) flips a card 180° on Y over 0.7 s with perspective 1200 px; the front panel's blob shape drifts once as the grid comes into view.
06
Mentor row
Photos unroll from the bottom with a stagger; on hover the image lifts 6 px and its caption's company turns accent; the quote's lines rise from masks.
07
Outcomes band
The panel rises in; figures count up on enter; the photos drift 4 % in opposite directions as the panel scrolls.
08
Enrol with a pay-toggle
The toggle's pill slides over 0.4 s; the price digits count between values over 0.6 s; the button's arrow nudges on hover.
09
Minimal footer
None beyond link colour on hover.

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…

Brightwick

What's inside

Ring preloader

The ring's arc draws to 100 % over 1.2 s, the name rises, the slab lifts and the hero intro begins.

Fixed bar with cohort pill

Turns translucent white with a blur after 80 px; link underlines draw in the accent.

Hero with live progress ring

Lines rise from masks; the photo settles from 1.08; the card pops in with back.out and its ring draws to 24 % while the number counts; the card floats up 6 px and back once and tilts slightly toward the pointer.

Lesson path with drawn connectors

The connector path draws itself (stroke-dashoffset) as the section scrolls, scrubbed; each node pops (scale 0.8→1, back.out) with its disc filling the accent when the drawing pen reaches it; the cards tilt 2° toward the pointer on hover.

Flip-card course grid

Cards rise in with a stagger; hovering (or tapping) flips a card 180° on Y over 0.7 s with perspective 1200 px; the front panel's blob shape drifts once as the grid comes into view.

Mentor row

Photos unroll from the bottom with a stagger; on hover the image lifts 6 px and its caption's company turns accent; the quote's lines rise from masks.

Outcomes band

The panel rises in; figures count up on enter; the photos drift 4 % in opposite directions as the panel scrolls.

Enrol with a pay-toggle

The toggle's pill slides over 0.4 s; the price digits count between values over 0.6 s; the button's arrow nudges on hover.

Minimal footer

None beyond link colour on hover.

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.