Live page · scroll inside

Freestrength gym · dark · landing page · gsap · lenis · html

Forge

A strength gym's site in iron black and competition red: a full-bleed photo of a loaded barbell under a heavy two-line headline and a fact row; then a plate loader where a slider, ±2.5 kg buttons or preset lifts load an SVG barbell symmetrically in competition-coloured plates (unchanged plates stay, others slide off and on the sleeves); a week timetable whose today column carries a live now line and a next-class line (a day list on phones); a photo with a kit list; and three membership rows.

Placeholder photos by GRAHAM MANSFIELD and Andrew Valdivia on Unsplash. Replace them with your own before launch.

What's inside

01
Anvil wordmark bar
Turns translucent after 80 px.
02
Full-bleed barbell photo with headline and facts
Photo eases from scale 1.08 to 1; headline lines rise; facts rise in turn.
03
Plate loader
Changing the weight keeps the plates that stay the same; plates no longer needed slide off the sleeve ends and fade (0.3 s); new plates slide on from the ends (0.45 s, power3.out, 0.06 s stagger) and the spring collars follow. The total rolls to its new value.
04
Week timetable with a live now line
Blocks rise by column. The now line moves to the current minute and is checked again every minute.
05
Photo and kit list
The photo unrolls from the top; rows rise.
06
Three membership rows
Rows rise in turn.
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…

Forge

Placeholder photos by GRAHAM MANSFIELD and Andrew Valdivia on Unsplash. Replace them with your own before launch.

What's inside

Anvil wordmark bar

Turns translucent after 80 px.

Full-bleed barbell photo with headline and facts

Photo eases from scale 1.08 to 1; headline lines rise; facts rise in turn.

Plate loader

Changing the weight keeps the plates that stay the same; plates no longer needed slide off the sleeve ends and fade (0.3 s); new plates slide on from the ends (0.45 s, power3.out, 0.06 s stagger) and the spring collars follow. The total rolls to its new value.

Week timetable with a live now line

Blocks rise by column. The now line moves to the current minute and is checked again every minute.

Photo and kit list

The photo unrolls from the top; rows rise.

Three membership rows

Rows rise in turn.

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.