Live page · scroll inside

Premiumindie game studio · dark · landing page · gsap · lenis · html

Pixelforge

An indie game studio site whose hero is a real CRT: a procedurally drawn 320 × 180 pixel landscape with pointer parallax is pushed through a WebGL shader with curvature, scanlines, RGB fringing, bloom and a vignette, followed by cartridge cards, pixel stat tiles, a terminal devlog and a jam signup.

Placeholder photos by Michael Dziedzic, Mitchell Luo, Logan Voss, Julian Hochgesang and Vadim Bogulov on Unsplash. Replace them with your own before launch.

What's inside

01
Pixel loading bar
Segments fill one by one at 70 ms each with the percentage stepping in twelfths, the text blinks twice, then the slab snaps away (no easing: a hard cut after 0.2 s).
02
Pixel bar
Turns translucent after 80 px; the pill's shadow collapses on press.
03
CRT hero with pixel parallax
The layers parallax with the pointer (far 2 px, mountains 6–10 px, trees 16 px, ground 24 px) and scroll the ground continuously; stars twinkle; the CRT's scanline phase rolls; clicking or pressing any key fires a 'start' flash (white frame + screen jitter) and scrolls to the games; the title's shadow offset follows the pointer; PAUSE freezes the scene and the blink.
04
Game cartridges
Cards drop in with a stagger and a 4-px overshoot; on hover the cartridge lifts 6 px and its screenshot gets a scanline overlay that rolls; the label colour floods the border.
05
Studio stats and team
Tiles pop in with steps(3) easing; numbers count up; the photo frame draws its stepped border on enter; name tags wiggle 1 px on hover.
06
Devlog changelog
Entries type in line by line (a stepped clip-path wipe; long lines wrap) when the log enters; the cursor blinks four times, then rests; hovering an entry highlights it like a selected row.
07
Game-jam CTA
The panel's heading types in; the button presses in on hover; submitting plays a pixel 'coin' animation (a small square bounces into the field) and swaps the label to 'ENTERED'.
08
Pixel 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…

Pixelforge

What's inside

Pixel loading bar

Segments fill one by one at 70 ms each with the percentage stepping in twelfths, the text blinks twice, then the slab snaps away (no easing: a hard cut after 0.2 s).

Pixel bar

Turns translucent after 80 px; the pill's shadow collapses on press.

CRT hero with pixel parallax

The layers parallax with the pointer (far 2 px, mountains 6–10 px, trees 16 px, ground 24 px) and scroll the ground continuously; stars twinkle; the CRT's scanline phase rolls; clicking or pressing any key fires a 'start' flash (white frame + screen jitter) and scrolls to the games; the title's shadow offset follows the pointer; PAUSE freezes the scene and the blink.

Game cartridges

Cards drop in with a stagger and a 4-px overshoot; on hover the cartridge lifts 6 px and its screenshot gets a scanline overlay that rolls; the label colour floods the border.

Studio stats and team

Tiles pop in with steps(3) easing; numbers count up; the photo frame draws its stepped border on enter; name tags wiggle 1 px on hover.

Devlog changelog

Entries type in line by line (a stepped clip-path wipe; long lines wrap) when the log enters; the cursor blinks four times, then rests; hovering an entry highlights it like a selected row.

Game-jam CTA

The panel's heading types in; the button presses in on hover; submitting plays a pixel 'coin' animation (a small square bounces into the field) and swaps the label to 'ENTERED'.

Pixel 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.