Live page · scroll inside

FreeAI customer support · light · landing page · gsap · lenis · html

Sibyl

An AI customer-support site in warm paper, coral and teal: a hero where a live help-center widget works a scripted morning queue (typing dots, word-by-word replies, cited sources, a handoff) while a deflection gauge climbs, an annotated anatomy of one reply with linked pins and notes, a teal results band, a handoff note as your agent receives it, pay-per-resolution pricing with a volume slider, a sticky FAQ and a coral CTA.

What's inside

01
Speech-mark bar
Solid after 80 px; underlines draw.
02
Live inbox hero
Tickets play in order: the customer message slides in, three typing dots bounce for 0.7 s, the reply types word by word, source chips pop, and an outcome tag lands (resolved or handed to billing). Each resolved ticket pushes the deflection arc and the 'resolved today' figure up. After five tickets the widget offers a replay. A pause control freezes it.
03
Anatomy of an answer
The card rises, then the pins pop one by one; hovering or focusing a pin or note highlights both.
04
Teal results band
Figures count up as the band enters.
05
Handoff note
The note slides in and straightens as it enters.
06
Pay per resolution
The cost and hours tween as the slider moves.
07
Two-column FAQ
Rows rise in sequence.
08
Coral CTA
The card rises.
09
Simple 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…

Sibyl

What's inside

Speech-mark bar

Solid after 80 px; underlines draw.

Live inbox hero

Tickets play in order: the customer message slides in, three typing dots bounce for 0.7 s, the reply types word by word, source chips pop, and an outcome tag lands (resolved or handed to billing). Each resolved ticket pushes the deflection arc and the 'resolved today' figure up. After five tickets the widget offers a replay. A pause control freezes it.

Anatomy of an answer

The card rises, then the pins pop one by one; hovering or focusing a pin or note highlights both.

Teal results band

Figures count up as the band enters.

Handoff note

The note slides in and straightens as it enters.

Pay per resolution

The cost and hours tween as the slider moves.

Two-column FAQ

Rows rise in sequence.

Coral CTA

The card rises.

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