Animation guidelines
How Well moves. Every hero animation is a stack, scenes cut between stacks, and a feature video is a run of scenes.
Layers
Every hero animation is a stack. A product surface at the base, a 3D tilt, then a fixed focus on top. Toggle each layer to see what it adds.
The stack
Ask anything or use / for commands...
The product surface. It can slide left, right, up, or down.
Ask anything or use / for commands...
A 3D tilt on top, set to a lab angle. The plane rotates on x, y, and z.
Ask anything or use / for commands...
Focus locks to a distance. A flat plane stays sharp; a tilt brings a focal band.
The lab
Combine them. Toggle each layer, change the angle, move the wall.
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Focus
Angle
UI layer movement
The UI layer
The UI layer is the product surface we rotate, and it can hold more than one screen. Fill the container: lay multiple cards out in a padded grid that spans the full width, so the tilt always has a surface to catch. The one exception is a very zoomed-in UI layer, where a single card fills the frame on its own.
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Multiple cards in a padded grid, filling the container. Use this by default.
6 suppliers have no VAT number on file: Notion, Figma, Linear, Vercel, Ramp, and Intercom. Want me to draft a data-request email?
Ask anything or use / for commands...
| Company name | Registered name | Domain | Country | Industry | Tax ID | Primary contact | Open balance | ||
|---|---|---|---|---|---|---|---|---|---|
| 1 |  | Stripe, Inc. | stripe.com | United States | Payments | US 46-1234567 | €84,200 | ||
| 2 |  | Qonto SAS | qonto.com | France | Banking | FR 85 123456789 | €12,480 | ||
| 3 |  | Mercury Technologies, Inc. | mercury.com | United States | Banking | US 84-7654321 | €31,600 | ||
| 4 |  | Slack Technologies, LLC | slack.com | United States | Software | US 47-3287654 | €4,920 | ||
| 5 |  | Xero Limited | xero.com | New Zealand | Accounting | NZ 123-456-789 | €18,750 | ||
| 6 |  | Pennylane SAS | pennylane.com | France | Accounting | FR 42 987654321 | €2,140 | ||
| 7 |  | HSBC Holdings plc | hsbc.com | United Kingdom | Banking | GB 123456789 | €56,300 | ||
| 8 |  | Asana, Inc. | asana.com | United States | Software | US 45-9876543 | €6,880 | ||
| 9 |  | The Sage Group plc | sage.com | United Kingdom | Accounting | GB 987654321 | €9,410 | ||
| 10 |  | Dropbox, Inc. | dropbox.com | United States | Software | US 26-0138832 | €1,260 | ||
| 11 |  | Agicap SAS | agicap.com | France | Treasury | FR 88 456789012 | €7,340 | ||
| 12 |  | Dext Software Limited | dext.com | United Kingdom | Accounting | GB 445566778 | €3,920 | ||
| 13 |  | Box, Inc. | box.com | United States | Software | US 20-4936620 | €880 | ||
| 14 |  | Notion Labs, Inc. | notion.so | United States | Software | — | €4,150 | ||
| 15 |  | Figma, Inc. | figma.com | United States | Software | — | €2,680 | ||
| 16 |  | Linear Orbit, Inc. | linear.app | United States | Software | — | €5,490 | ||
| 17 |  | Vercel Inc. | vercel.com | United States | Software | — | €1,940 | ||
| 18 |  | Ramp Business Corporation | ramp.com | United States | Fintech | — | €8,720 |
Very zoomed in? One card inside is enough.
Progressive UI
The UI layer should build in, not pop in. Reveal the surface one element at a time: the header first, then each row — avatar and lines — fades and rises into place, staggered. It reads as the product coming to life, and gives the eye somewhere to travel while the camera moves.
Stripe
Stripe, Inc.
Qonto
Qonto SAS
Mercury
Mercury Technologies, Inc.
Slack
Slack Technologies, LLC
Header first, then each row builds in piece by piece — logo, name, then value — on a calm, deliberate cadence. Holds fully visible underprefers-reduced-motion.
Infinite loop
When the UI layer moves, the loop has to be invisible. A repeating slide must wrap with no seam and no jump. But movement does not always loop: a one-shot entrance plays once, then rests.
Tile the content and translate by exactly one tile, so the wrap lands on an identical frame. For a sliding wall: left, right, up, or down. Loops forever, no seam.
A single surface that cannot tile drifts out and eases back, like a slow truck right then a return. It loops by reversing, so no edge is revealed.
Some moves do not loop. A reveal or push-in runs on load, then the camera rests. A first impression, not perpetual motion.
Every loop holds still underprefers-reduced-motion.
Workspace elevation
When the hero shows chat beside a workspace panel, the right panel can lift along its surface normal on every scene cut — orthogonal to the tilted UI plane, not a screen-space diagonal. Chat stays on the base plane. Shadow travels only during the motion; at rest the panel sits flush with no extra drop shadow.
€142K cash across accounts, €47K MRR (+8% vs last month), and €18.4K net burn — about 7.7 months runway at current spend.
Ask anything or use / for commands...
Cash
€142K
+€12K
MRR
€47K
+8%
Net burn
€18.4K
-3%
Runway
7.7 mo
+0.4 mo
MRR trend
€47K
+8.3%Expense mix
On each scene cut the workspace panel lifts along the surface normal (translateZ) and settles flush, while chat stays pinned to the base plane.
4.8s settle · hero-panel-settle
When to use
Split product shells (chat + tabbed workspace) that hard-cut between scenes — e.g. Graph → Companies → Dashboard.
3D context
Parent shell uses `transform-style: preserve-3d`. Chat is pinned with `translateZ(0)`; only the workspace panel animates.
Motion
4.8s cubic-bezier(0.16, 1, 0.3, 1). `translate3d(0, 0, 72px)` → `0` along the panel normal — no extra rotateX/Y on the panel.
Shadow
Deep shadow only in the keyframe `from` state. `to` is `box-shadow: none` so the resting panel does not float.
Implementation: @keyframes hero-panel-settle in globals.css; applied on the active workspace column in obsidian-graph-hero.tsx. Live on the homepage.
Recipe
Putting it together. To build a hero like the lab, stack the layers in order.
- 1
Build the UI layer
A product surface. Lay multiple cards in a padded grid that fills the width. One card only when it is very zoomed in.
- 2
Tilt it
Wrap the surface in the 3D perspective and pick an angle. Start with Top-left.
- 3
Lock the focus
Set the focus distance so the sharp band lands on the part that carries the message.
- 4
Add movement that loops
Drift a single surface and ease it back, or slide a tiled wall as a seamless marquee. A reveal entrance plays once.
- 5
Elevate the workspace on scene cuts
For chat + workspace shells, lift the right panel along its surface normal (translateZ) on each hard cut. Chat stays on the base plane.
- 6
Respect reduced motion
Hold a static tilt with the focus band. No breathing, no loop, no elevation landing.
Single surface? Drift it and ease back. A tiled wall? Slide it as a seamless marquee.
Scenes
Once you can build one hero, combine several. Each scene is its own angle, with its own UI layer. Scenes switch with a hard cut: no transition, no tween between them. The cut is the edit.
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Hold each scene for a beat, then cut straight to the next angle, and loop back to the first. Within a scene the UI layer is a full wall of cards that keeps sliding on its own seamless loop; only the jump between scenes is instant.
Video scenes
For videos, not heroes. A feature video is a run of hard-cut scenes: sliding product-UI scenes (the same stack as a hero), a typography beat, and the logo to close.
Typography scene
A full-bleed line of text on our darkest surface, where each word blurs into focus one at a time. Drop it between product scenes as a beat of its own.
Yourbusiness,finallyinfocus.
Darkest-surface background, one centred line, each word resolving from blur to sharp in sequence. It loops on its own.
Logo animation
The sign-off. The Well logo resolves from blur to sharp on our darkest surface. It is always the last scene of a feature video.
The logo blurs into focus on the darkest surface, then holds. Same resolve as the typography scene, on the mark instead of words.
Feature video
How the scenes combine. Opening product-UI scenes, a typography beat, and the logo to close. Each scene is its own angle or surface, and every switch is a hard cut.
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Ask anything or use / for commands...
Scene one is a sliding product-UI scene like Scenes above. Cut to the typography beat, then on through the remaining product scenes, and end on the logo. The logo is always last. Every cut is instant, then it loops.