Depth tilt

1. Copy to Webflow

   Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: Webflow removes any font your site has not installed.
   Copy to Webflow

2. Add custom CSS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

   A layer does not grow as it slides: a picture that exactly fills the surface needs a little more size than its box, or an edge shows. And the default sheen is white, so a white card wants a dark sheenColor.

3. Add custom JS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

4. Use it on your own elements

   Custom attributes
   Select the element on the canvas and open the Settings panel. Under Custom attributes, add a pair: the name on the left, the value on the right.

   Custom attribute	What it does
   data-depth-tilt	Marks a card: the box that keeps still, takes the pointer and carries the settings. It takes no value: leave the value field empty. Put it on any box of the page, as many as you like; each one tilts on its own.
   data-depth-tilt-surface	On the box inside the card that turns, usually one div that fills it. It takes no value. Without it the card turns itself, and shivers when the pointer sits on its very edge. [ Optional ]
   data-depth-tilt-layer	On anything inside the card that should float, with a number as its value: 1 slides one step of the depth setting towards the pointer, 3 three steps, and a negative number sinks the layer under the sheet so it slides the other way. Empty reads as 1. Without any layer the card turns in one piece. [ Optional ]
   data-depth-tilt-state	Written by the engine on the card: live while it is turned or moving, idle at rest, still under reduced motion. Never written by hand. [ Optional ]

   Settings
   Every setting is a custom attribute too, added the same way and on the same element. An attribute always wins over the defaults written in the code.

   Attribute	Default	What it is
   data-depth-tilt-sheen-color	#ffffff	Colour of the disc of light that follows the pointer over the surface. Options: any CSS colour, white on a dark or coloured card, a dark ink on a white one; taken out of this block, --depth-tilt-sheen-color on the card takes over.
   data-depth-tilt-sheen	0.3	Strength of the sheen at its centre, 0 to 1.
   data-depth-tilt-angle	7	Tilt of the card, in degrees, when the pointer is on one of its edges.
   data-depth-tilt-perspective	clamp(700px, 70vw, 1200px)	Distance from the eye to the card, any CSS unit: how strongly the far edge shrinks as the card turns.
   data-depth-tilt-depth	clamp(4px, 0.45vw, 8px)	Distance a layer of depth 1 slides when the pointer is on an edge, any CSS unit; each layer multiplies it by its own number.
   data-depth-tilt-scale	1.02	Size of the card while the pointer holds it, in times its own size.
   data-depth-tilt-stiffness	120	Pull of the spring towards the pointer.
   data-depth-tilt-damping	14	Brake on that pull; with stiffness it sets how much the card overshoots.

Two files, no build step. It runs in the browser only. Load it with a script tag in plain HTML, in a client-side script in Astro, never in the frontmatter. In React, call DepthTilt.mount(ref.current) in useEffect and destroy() in its cleanup.

1. Tune it, either way

   Per element with an attribute, or once for the whole site by editing DEFAULTS at the top of the file.

   Attribute	Default	What it is	Lower	Higher
   data-depth-tilt-sheen-color	#ffffff	Colour of the disc of light that follows the pointer over the surface. Options: any CSS colour, white on a dark or coloured card, a dark ink on a white one; taken out of this block, --depth-tilt-sheen-color on the card takes over.
   data-depth-tilt-sheen	0.3	Strength of the sheen at its centre, 0 to 1.	At 0 no light at all, the card only turns	Past 0.5 the light reads as a white spot and hides the words under it
   data-depth-tilt-angle	7	Tilt of the card, in degrees, when the pointer is on one of its edges.	Under 4 the turn is felt more than seen	Past 12 the card swings like a toy and its far edge visibly shrinks
   data-depth-tilt-perspective	clamp(700px, 70vw, 1200px)	Distance from the eye to the card, any CSS unit: how strongly the far edge shrinks as the card turns.	A close eye, a strong keystone, dramatic on a large card	A far eye, the card turns almost flat, without depth
   data-depth-tilt-depth	clamp(4px, 0.45vw, 8px)	Distance a layer of depth 1 slides when the pointer is on an edge, any CSS unit; each layer multiplies it by its own number.	Layers that barely part, a flat card that only turns	Layers that travel far, and may leave the card or cross each other
   data-depth-tilt-scale	1.02	Size of the card while the pointer holds it, in times its own size.	At 1 the card does not grow; under 1 it sinks as if pressed	Past 1.05 the card covers its neighbours
   data-depth-tilt-stiffness	120	Pull of the spring towards the pointer.	A lazy card that trails far behind the pointer	A card stuck to the pointer, nervous on a fast move
   data-depth-tilt-damping	14	Brake on that pull; with stiffness it sets how much the card overshoots.	Under 10 the card bounces and wobbles when let go	Past 22 no overshoot at all, the card creeps back to flat

2. Drive it from JavaScript

   When something other than the pointer should turn a card, a card posed at an angle in a hero for instance, or a card turned by a scroll position.
   JavaScript Copy

   const element = document.querySelector('[data-depth-tilt]');
   
   const card = DepthTilt.mount(element);   // the card auto() mounted, or a new one
   card.tilt(0.6, -0.4);   // turned towards its top right, and held there
   card.release();         // settles back to flat
   
   // When the card leaves the page:
   card.destroy();   // removes the sheen and the listeners

3. Fit it to your page

   • Structure: three marks, on your own elements. data-depth-tilt goes on the card, the box that keeps still and takes the pointer. Inside it, data-depth-tilt-surface goes on the box that turns. Inside the surface, data-depth-tilt-layer="2" goes on anything that should float. The preview's card is a link, its surface a div filling the link.
   • Why two boxes. A box that turned under its own pointer would move its edge away from it, lose the pointer, fall back and catch it again. The card never moves, so the pointer is in or out for good; only the surface turns. Without a marked surface the card turns itself, which is fine for a box the pointer crosses and rough at its very edge.
   • The number of a layer is a multiple of depth. 1 is one step towards the eye, 3 three steps; 0 keeps the layer on the sheet; a negative number sinks it under the sheet, and it slides the other way. An empty value reads as 1. The preview uses -2 for the monogram, 0.5 for the frame, 1 for the top line, 1.5 for the weight and 3 for the name.
   • One setting for every card of the page, without opening the file: declare window.DepthTiltSettings = { angle: 10 } in a script placed before depth-tilt.js. The three levels, least specific first, are DEFAULTS, then that object, then a data-depth-tilt-* attribute on the card itself (data-depth-tilt-angle="10"), so one card can still differ from the page-wide setting.
   • The colour of the sheen can also come from the stylesheet: without a sheenColor setting in the attributes or in the settings block, the custom property --depth-tilt-sheen-color on the card is read, then DEFAULTS.sheenColor. The engine writes its own copy of DEFAULTS into the Embed, so on a Webflow page the attribute data-depth-tilt-sheen-color is the way to change it per card.
   • What the script adds: one box as the last child of the surface, depth-tilt-sheen, with the disc of light depth-tilt-glow inside it. It never takes a click.
   • What the script writes: data-depth-tilt-state on the card, live from the moment the pointer takes it until it has settled flat again, idle at rest, still under reduced motion. While a card is live, an inline transform on its surface and an inline translate on each layer; both are taken back when it rests.
   • **From JavaScript, beyond mount, auto and destroy**: the api carries element, surface, settings, tilt(x, y) which turns the card by hand, -1 to 1 across and down, and holds it there, release() which lets it settle, and frames() and isRunning() for a test that wants to see the loop sleep. DepthTilt.isRunning() says whether the page's one loop runs. The effect emits no event.
   • **destroy() leaves the card as it was**: the sheen removed, the listeners gone, the state attribute and every inline value taken off, and the inline position: relative removed if the script set it.
   • Touch: a card follows the finger while it presses and settles when the finger lifts. The page still scrolls: a press that turns into a scroll is cancelled by the browser, and the card is let go.
   • Keyboard: a card that takes the focus from the keyboard lifts flat, with its scale and its sheen in the middle, and settles when the focus leaves.
   • **prefers-reduced-motion**: no tilt, no slide, no scale. The sheen alone fades in at the middle of the card under the pointer and fades out when it leaves, a light change of state. The state reads still, and turning the preference off brings the tilt back without a reload.
   • The words of the markup are the preview's, and they ship as they are. Put the user's own words in their place whenever they want.
   • On Webflow, add the fonts first. Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: the paste names them, and the Designer drops a font the site does not have.

4. Avoid the pitfalls

   • The default sheen is white, and white on a white card shows nothing. On a white or very pale surface give the card a dark sheen, data-depth-tilt-sheen-color="#15100c" with a sheen around 0.08, or a tinted surface.
   • A transform of your own on the surface is replaced while the card is live. The engine writes the whole transform of the surface, and puts back the inline value it found when the card rests; a transform that comes from a class is covered for that time. Put it on a wrapper instead. The layers are moved with the translate property, which adds to a transform of their own instead of replacing it.
   • **overflow: hidden on the surface cuts the layers that slide past its edge.** That is often what is wanted for a picture; for a label near the edge, lower its number or leave the surface open.
   • A layer does not grow. Sliding a picture that exactly fills the surface uncovers a strip along one edge. Give it a negative inset of at least depth times its number, or a slightly larger size, so there is picture left to slide in.
   • **A parent with overflow: hidden clips the turned card**, which is larger than its box by scale and leans out of it. Leave a margin around the cards, or let the parent overflow.
   • **Settings handed to mount() after the page loaded are dropped.** auto() mounts on DOM ready, and mount() on a card that already carries the effect returns the existing one. A page-wide block goes in window.DepthTiltSettings, which auto() reads itself.
   • Text on a turned surface is drawn as a picture. While the card is live the browser renders the surface on its own layer; on a low density screen the words soften a little, and sharpen again at rest.

One click on Copy the AI prompt copies everything an assistant needs to build this effect: the complete code, the markup, the dependency, every setting and every pitfall.