Live page · scroll inside

FreePhotography / Portfolio · dark · landing page · webgl · gsap · lenis · html

Grainhouse

A photographer's site in near-black: an iris closes on the loader, then a full-screen WebGL slider tears each portrait apart along a noise field and knits the next one together, titled by a headline that drops out and rises back; a grain-and-vignette pass sits over everything, a marquee strip, a staggered two-column series grid and a scrubbed statement follow.

Placeholder photos by Bella, Cornea Lucian, Liana S, Jolly Yau and Shawn Rain on Unsplash. Replace them with your own before launch.

What's inside

01
Iris preloader
Wordmark fades up, a half-ring sweeps once, then the cover irises to a point.
02
Thin nav
Links brighten on hover; the bar frosts after 80 px.
03
Displacement slider
Portraits tear into each other along a noise field; the title drops and rises on each change; the bar fills over the dwell; the pause toggle (aria-pressed) holds the dwell while arrows, keys and drag still work.
04
Marquee strip
Loops left over 28 s until paused.
05
Staggered series grid
Items rise in; images settle and colour on hover.
06
Statement + facts
Words ink on scrub; figures count up.
07
Let's shoot
Lines rise from masks.
08
Footer strip
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…

Grainhouse

Placeholder photos by Bella, Cornea Lucian, Liana S, Jolly Yau and Shawn Rain on Unsplash. Replace them with your own before launch.

What's inside

Iris preloader

Wordmark fades up, a half-ring sweeps once, then the cover irises to a point.

Thin nav

Links brighten on hover; the bar frosts after 80 px.

Displacement slider

Portraits tear into each other along a noise field; the title drops and rises on each change; the bar fills over the dwell; the pause toggle (aria-pressed) holds the dwell while arrows, keys and drag still work.

Marquee strip

Loops left over 28 s until paused.

Staggered series grid

Items rise in; images settle and colour on hover.

Statement + facts

Words ink on scrub; figures count up.

Let's shoot

Lines rise from masks.

Footer strip

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.