Live page · scroll inside

PremiumAI coding assistant · dark · landing page · gsap · lenis · html

Cortex

An AI coding-assistant site in editor black with ice blue: a hero editor that types a suggestion as a live diff (red removals, green additions typed in place) with Accept and Reject that really apply it and run the tests, three switchable suggestions, a six-key shortcut sheet with pressable caps, a stacked bar of how the context budget is spent, kept-suggestion rates by language, two-plan pricing and a copyable install line.

What's inside

01
Caret bar
Solid after 80 px.
02
Diff editor hero
The editor types the selected suggestion as a diff: removed lines turn red one by one, then added lines type in green three characters at a time. Accept fades the removed lines out, clears the green and runs the tests (a bar fills and the count ticks to all passed); Reject fades the added lines out and restores the originals. Tabs switch suggestions.
03
Shortcut sheet
Rows rise in sequence; the key caps press down on hover.
04
Context budget
The stacked bar's segments grow in from the left in sequence when it enters.
05
Acceptance by language
Bars grow from zero when they enter; values count.
06
Two-plan pricing
Panels rise.
07
Install line CTA
The heading rises; Copy confirms in place for 1.5 s.
08
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…

Cortex

What's inside

Caret bar

Solid after 80 px.

Diff editor hero

The editor types the selected suggestion as a diff: removed lines turn red one by one, then added lines type in green three characters at a time. Accept fades the removed lines out, clears the green and runs the tests (a bar fills and the count ticks to all passed); Reject fades the added lines out and restores the originals. Tabs switch suggestions.

Shortcut sheet

Rows rise in sequence; the key caps press down on hover.

Context budget

The stacked bar's segments grow in from the left in sequence when it enters.

Acceptance by language

Bars grow from zero when they enter; values count.

Two-plan pricing

Panels rise.

Install line CTA

The heading rises; Copy confirms in place for 1.5 s.

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.