Live page · scroll inside

Premiumrecruiting platform · light · landing page · gsap · lenis · html

Castwell

A recruiting-platform site whose hero is a working pipeline board (drag candidate cards between stages with lift, tilt, drop targets, snapping and a confetti burst on Offer, or move them with arrow keys), an SVG org chart that unfolds level by level as you scroll with open roles you can fill, a feature bento, toggle pricing and a demo strip.

Placeholder photos by S O C I A L . C U T, JIRAN FAMILY, Paymo and Dane Deaner on Unsplash. Replace them with your own before launch.

What's inside

01
Card-shuffle preloader
Three cards drop in from the top 90 ms apart with back.out, then nudge right one column; the name fades; the slab lifts.
02
Fixed bar with demo pill
Turns translucent after 80 px; underlines draw.
03
Headline with a draggable pipeline board
Lines rise; the board unrolls; cards can be dragged between columns with the pointer (the card lifts with a shadow and tilts 3°, columns highlight as drop targets, the card snaps into place and the counts tween); dropping a card into Offer fires a small confetti burst of discs; keyboard users can move a focused card with the arrow keys.
04
Unfolding org chart
Scrolling through the section scrubs the unfold: connectors draw and nodes pop in level by level; clicking an open-role node fills it (dashed → solid, a name types in) and the headcount counter beside the heading increments.
05
Feature bento
Tiles unroll with a stagger; photographs zoom on hover; the stat counts to 19 days on enter; rings draw to their value.
06
Per-recruiter pricing with a yearly toggle
Cards rise with a stagger; the toggle slides and the digits count to the new price over 0.5 s; hovering a card lifts it 4 px.
07
Demo booking strip
The panel rises; the photo settles from 1.05; submit shows a confirmation with a calendar slot.
08
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…

Castwell

What's inside

Card-shuffle preloader

Three cards drop in from the top 90 ms apart with back.out, then nudge right one column; the name fades; the slab lifts.

Fixed bar with demo pill

Turns translucent after 80 px; underlines draw.

Headline with a draggable pipeline board

Lines rise; the board unrolls; cards can be dragged between columns with the pointer (the card lifts with a shadow and tilts 3°, columns highlight as drop targets, the card snaps into place and the counts tween); dropping a card into Offer fires a small confetti burst of discs; keyboard users can move a focused card with the arrow keys.

Unfolding org chart

Scrolling through the section scrubs the unfold: connectors draw and nodes pop in level by level; clicking an open-role node fills it (dashed → solid, a name types in) and the headcount counter beside the heading increments.

Feature bento

Tiles unroll with a stagger; photographs zoom on hover; the stat counts to 19 days on enter; rings draw to their value.

Per-recruiter pricing with a yearly toggle

Cards rise with a stagger; the toggle slides and the digits count to the new price over 0.5 s; hovering a card lifts it 4 px.

Demo booking strip

The panel rises; the photo settles from 1.05; submit shows a confirmation with a calendar slot.

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.