---
id: "2115882138453311866"
source: https://x.com/Eyeson_Studio/status/2115882138453311866
author: "Eyeson Studio (@Eyeson_Studio)"
media: "video, 1920x1080, 155.5s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Neon Line Explainer in Deep Navy

## Summary
A long explainer animation set in a near-black navy space, built from glowing cyan line art: wireframe UI cards, spirograph orbits, a glass code card, a figure in goggles sketching shapes, an isometric browser and a glowing planet. Worth studying for how a tiny vocabulary (thin strokes, one glow colour, soft blue floor light) carries two and a half minutes of storytelling.

## Style
- Theme: dark (navy void with cyan glow)
- Mood: futuristic, calm, techy, dreamy
- Tags: explainer-video, line-art, neon-glow, wireframe-ui, orbit-rings, isometric, stroke-animation
- Category: Motion, Illustration

## Palette
| Role | Hex |
|---|---|
| Void black | #02040D |
| Midnight | #081127 |
| Floor glow navy | #0D1D41 |
| Card slate | #2B384D |
| Muted steel | #5B7489 |
| Cyan glow | #7FD9EF |
| Shape yellow | #E8D43A |
| Shape violet | #5A2FD6 |

## Typography
No readable text. The only glyphs are small code-bracket symbols drawn in cyan inside circles and on the glass card, which read as icons rather than type. If captions are added, a thin geometric sans such as Manrope 300 in white at 60% would fit.

## Layout
- 16:9 (1920x1080). Every scene is centred on a single focal object with large empty margins.
- A soft elliptical blue glow sits low in the frame like a floor light; edges fall to pure black (radial vignette).
- Objects use thin 1.5px to 2px strokes, rounded caps, and blur-based glow (about 8px to 16px).
- Cards have 6px radii; the isometric browser is tilted about 55deg on X and rotated about -30deg on Z.

## Elements
- Light rail: a vertical 1px white line with a glowing cyan bead travelling along it, next to two grey wireframe cards (header bars, text lines, image blocks).
- Spirograph: four or five large overlapping ellipses in white strokes with small cyan nodes holding code icons.
- Glass code card: a glowing cyan rounded square filled with tiny shapes (triangles, pills, circles, brackets) and a ball on a curved tail.
- Figure: a greyscale illustrated person in goggles drawing with a stylus, surrounded by a teal circle, a violet square and a yellow triangle outline.
- Isometric browser: a dark panel with three dots, image placeholders, a play button, a mini flowchart and text lines.
- Planet: a glowing cyan sphere with two thin orbit rings, a tiny yellow ring satellite and short radial tick lines.

## Motion
- 6.2s: the bead slides down the rail (about 1200ms per pass) while cards rise in.
- 34.2s: the ellipses rotate slowly in opposite directions (about 20s per turn) as nodes travel along them.
- 62.2s: the glass card floats with a 3s sine bob; the ball traces its curved tail.
- 90.2s: shapes draw on around the figure with stroke-dashoffset (about 900ms each, staggered 200ms).
- 118.2s: the camera glides over the isometric browser; a comet arcs top-right.
- 146.2s: the planet pulses (2s loop) and tick lines fade in and out.
- Scenes last 25s to 30s, joined by slow camera pushes and crossfades of about 600ms; easing is gentle ease-in-out throughout.

## Rebuild it
1. Make a full-screen section with `bg-[#02040D]` and a radial gradient floor glow: `radial-gradient(60% 30% at 50% 100%, #0D1D41, transparent)`.
2. Draw each scene as inline SVG with `stroke="#7FD9EF"`, `stroke-width="1.5"`, `stroke-linecap="round"` and a glow filter (feGaussianBlur 6 merged with the source).
3. Use Motion `motion.path` with `pathLength` from 0 to 1 (0.9s, ease-out) to draw shapes; stagger children by 0.2s.
4. Rotate orbit ellipses with `animate={{ rotate: 360 }}` and `transition={{ repeat: Infinity, duration: 20, ease: "linear" }}`.
5. Move the bead with `offsetPath` along the rail and animate `offsetDistance` 0% to 100%.
6. Chain scenes with `AnimatePresence mode="wait"`, crossfading over 0.6s, or drive them with scroll progress.

## Generation prompt
A minimal explainer animation in a deep navy void with a soft blue floor glow: thin glowing cyan line art of wireframe website cards, huge overlapping orbit ellipses with small glowing nodes, a luminous glass card full of tiny symbols, a greyscale illustrated person in goggles sketching a yellow triangle and a teal circle, a tilted isometric browser layout and a glowing planet with orbit rings; slow camera moves, elegant, futuristic, calm.