3D Tilt Card
One line in, one self-contained index.html out: a single showpiece card that tilts in 3D toward the cursor, a sheen sliding across its face while its emblem and title float at depth — a card that feels held, not printed.
We made two examples: an indigo Studio Pass for Vibary and a forest-green Wall Pass for Ridgeline Climbing, with a ridge mark and an RL monogram in place of the triangle and VB. Both share the gradient face, the gold chip, the corner emblem, the sheen at the upper right and the same mid-tilt pose.
The label, the title, the line and the emblem come from your fields, and the two card colours make the gradient. The screenshot freezes the card mid-tilt; in the file it turns to follow the cursor, the sheen slides with it, and the title and emblem float at depth. You always get the 3D tilt, the moving sheen and the return to flat when the cursor leaves. The gold chip is drawn in; swap the emblem for your own mark.
Generated for this library
Input
Brief a membership card for a Vibary maker
Label VIBARY · MAKER
Title Studio Pass
Line AI design, in the browser
Emblem a triangle mark over the letters VB
Palette --ground #0a0a0b · --card-a #2a2a52 · --card-b #12122a ·
--ink #f2f2f3 · --accent #7c7cf0
Returned 1 file · index.html · one card on a drawn ground
card a gradient face between the two card colours, a light
edge and a soft shadow, given real 3D perspective
face the label overline, a gold chip, the emblem in the
corner, the title large, the line beneath
tilt the card turns toward the cursor, damped so it lags a
hair behind — weighted, not snapped
depth the title and emblem stand proud of the face and part
from it as the card turns
sheen a soft highlight slides across, brightest at the cursor
rest eases back to flat on leave; reduced motion stays flatYou fill in 6 fields — the braced lines at the top. Everything below them is fixed.
- 1The brief (one line)
- 2The card label
- 3The card title
- 4The card line
- 5The emblem
- 6The palette (one :root block)
3D Tilt Card
What this makes
One line in, one self-contained index.html out: a single showpiece card that tilts in 3D toward the cursor, a sheen sliding across its face while its emblem and title float at depth — a card that feels held, not printed.
The whole template, in one piece. The steps below are the entire workflow.
How to use it
- Copy the whole template with the button above.
- Replace the six slot lines — the label, title and emblem are the face; the two card colours set its gradient.
- Paste it into any coding agent or model in one message. It returns one index.html.
- Save the file and open it in a browser, then move the cursor across the card to tilt it and slide the sheen.
- Reface it any time by swapping the label, title and emblem; the tilt and sheen stay.
What you swap
- The brief (one line)
- a membership card for a Vibary maker
- The card label
- VIBARY · MAKER
- The card title
- Studio Pass
- The card line
- AI design, in the browser
- The emblem
- a drawn triangle mark over the letters VB
- The palette (one :root block)
- --ground #0a0a0b · --card-a #2a2a52 · --card-b #12122a · --ink #f2f2f3 · --accent #7c7cf0
Before it runs
- One card, not a deck — this skill makes a single object the reader can almost pick up.
- A face with a few marks — a label, a title, an emblem — not a paragraph; the card turns, so it stays sparse.
- A palette of five values, including two for the card's own gradient face; the ground and the sheen are drawn from them.
When to reach for it
When one object should be the whole moment — a membership card, a ticket, a product hero, a badge — and it should respond to the hand. The tilt, the sheen and the depth are fixed; the face is yours.
What changes
- A single index.html holding one card centred on a drawn ground, with no build step and no outside request.
- The card tilts toward the cursor in real 3D, lagging a hair behind it so the motion feels weighted rather than snapped.
- A soft sheen slides across the face following the cursor, brightest where the light would catch.
- The emblem and the title sit slightly above the face, so they part from it as the card turns — real parallax, not a picture of it.
- The card eases back to flat when the cursor leaves; with reduced motion it stays flat and lit, the sheen simply still.
Pairs with
- Collapsible FAQOne line in, one self-contained index.html out: a two-part section — a gradient call-to-action beside a stack of questions that open one at a time, each answer sliding down under a rotating chevron.
- Hover Marquee CardsOne line in, one self-contained index.html out: a section whose cards ride an endless marquee, drifting sideways forever until the cursor arrives — then the strip holds and the card under the cursor lifts.
- Scroll Reveal SectionOne line in, one self-contained index.html out: a single page section that rises into place as it enters the view, each card ringed by a light that follows the cursor — pick pricing, features, footer or a call to action.