3D Interactive vs Aurora UI
Both are dark, both are blue, both move. The difference is whether the depth is in the objects or in the air behind them.
Short answer: 3D interactive puts depth on the elements: stacked text-shadow on the headline, cards that lift 3px on hover and tilt toward the pointer. Aurora puts depth in the background: three blurred radial fields drifting on 14 to 22 second cycles behind panels that barely move.
What actually separates them
The 3D page earns its name from two things — a headline built from a multi-line text-shadow stack that imitates extrusion, and cards at 10px radius with a 1px #7f9bff border and a 0 10px 24px -10px blue shadow. Interaction is the point: hover translates the card up 3px, and the tilt follows the pointer.
Aurora is a background technique. Three circles at 50% radius, each a radial gradient fading to transparent at 66%, animated with small translate and scale keyframes so they drift out of sync. The panels in front use backdrop-filter: blur(14px) and a 1px rgba(255,255,255,.18) border — they are glass, and they are deliberately static.
Decision table
A filled dot marks the side that handles the dimension more convincingly. It is a judgement, not a rule — several rows are genuinely a tie.
| Dimension | 3D Elements / Interactive | Aurora UI |
|---|---|---|
| Where depth lives | On the elements — shadow stack and lift | In the background — drifting colour fields |
| Motion | Pointer-driven, only while hovering | Ambient, runs without input |
| Card treatment | 1px #7f9bff border, blue drop shadow | backdrop blur 14px, 1px white at 18% |
| Headline | ● Extruded via multi-layer text-shadow | Flat, sits on a scrim |
| Cost | Transform per card; cheap but needs throttling | Three composited layers; needs a pause control |
| Touch behaviour | Must be disabled — no hover on a phone | ● Works as-is; nothing depends on a pointer |
The CSS that changes
These are the declarations that make the difference visible. Everything else — font sizes, spacing, section order — is shared, because both pages use the same markup.
| Property | 3D Elements / Interactive | Aurora UI |
|---|---|---|
| Headline | text-shadow: 1px 1px 0 #5b7cff, 2px 2px 0 #4a6bee, 3px 3px 0 #3a5add |
no shadow; a dark scrim behind the text |
| Card | border: 1px solid #7f9bff; box-shadow: 0 10px 24px -10px rgba(80,120,255,.8) |
backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.18) |
| Hover | transform: translateY(-3px) + tilt |
nothing |
| Background | static gradient |
three radial gradients on 14–22s keyframes |
When each one wins
3D Elements / Interactive wins when
- The page is a product or a demo where the interaction itself is the argument
- There are few cards and the user will actually point at them
- You can gate the effect behind a hover media query so phones get the flat state
Aurora UI wins when
- The page is a hero or a landing section where atmosphere matters more than interaction
- You want the site to feel alive with no input at all — a kiosk, a launch page, a title screen
- You need the effect to work identically on touch
Steering a model to one or the other
Split the instruction between object and air. For 3D, say the depth is a multi-layer text-shadow with 1px steps and that cards tilt on hover toward the pointer, with perspective on the parent. For aurora, say the depth is three radial gradients at 50% radius drifting on different durations behind static glass panels. A model asked for "dark 3D glassmorphism" will do both at once — moving fields under cards that also have drop shadows and tilt — and three depth cues will fight each other.