Loading…
Live page · scroll inside
Premiumanalytics copilot · light · landing page · gsap · lenis · html
Querent
An analytics-copilot site set like a financial paper in cream, ink, ultramarine and saffron: a huge serif headline over a question panel where a typed question writes SQL and draws the chart it answers (bars, a line with its launch annotation, a donut, a funnel with the biggest drop called out), a 'shows its working' SQL with linked notes, a metric glossary table, a single pull quote, askers-free pricing and an ink CTA.
What's inside
- 01Serif masthead barSolid after 80 px.
- 02Question to chart heroA question types into the field 34 ms per character, the status runs 'Reading metrics' then 'Writing SQL', then the answer sentence fades up and its chart draws: bars grow, the line strokes on with its annotation, donut arcs sweep, funnel steps extend with the biggest drop called out. Typing your own question picks the chart by keywords.
- 03Shows its workingColumns rise in sequence; hovering a note underlines its highlight in the SQL.
- 04Metric glossaryRows fade up in sequence.
- 05Single pull quoteQuote lines rise from masks.
- 06Askers freeColumns rise.
- 07Warehouse CTAThe serif line rises from a mask.
- 08FooterNone.
Utility pages in the same file: 404 · Style guide · Password · Changelog
How to use it
From prompt to a live page.
- 01Walk the page
The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.
- 02Pick a palette
Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.
- 03Pick your stack
Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.
- 04Copy the prompt
It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.
- 05Make it yours, then iterate
Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.
