---
id: "aw-el-2ff8345c-6bd0-47cb-a227-28a11884b7e1"
source: https://www.awwwards.com/inspiration/desktop-anime-js
author: "Julian Garnier (juliangarnier)"
media: "photo, 1600x1200"
model: claude-opus-5-5
generated: 2026-10-31
---
# Animation Library Hero with Neon Dial

## Summary
The homepage hero of a JavaScript animation library: a short bold headline and subline on the left, and a large circular instrument dial on the right made of glowing rainbow ring segments, fine tick marks, a red diamond of stacked horizontal lines and a dotted easing curve sweeping across it. Below sits an install command chip and an outlined Learn more button. A clean lesson in letting one technical, oscilloscope-like graphic carry the whole brand.

## Style
- Theme: dark (warm charcoal with neon accents)
- Mood: technical, precise, energetic, confident, playful
- Tags: developer-tool, hero, neon-dial, oscilloscope, easing-curve, code-chip, dark-ui, generative-graphic
- Category: Hero, Art

## Palette
| Role | Hex |
|---|---|
| Charcoal background | #262422 |
| Ring track | #353630 |
| Muted red | #89433B |
| Signal red | #F24C4C |
| Neon green | #3BE07A |
| Cyan | #2CE0D0 |
| Amber | #F5A524 |
| Headline white | #E6E4E0 |

## Typography
- Headline ("All-in-one animation engine."): rounded geometric sans, bold, sentence case, off-white, three lines, about 5% of frame height per line, tight 1.0 leading. Outfit Bold or Lexend SemiBold.
- Subline: same family, regular, about 1.6% of frame height, two lines, slightly dimmer.
- Wordmark top-left: italic bold lowercase with a red dot (placeholder wordmark).
- Nav links: medium sans 13px with small line icons. Inter Medium.
- Install chip: monospace 12px, off-white. JetBrains Mono.
- Learn more button: medium sans 13px with a down arrow icon.

## Layout
- 4:3 frame (1600x1200), single full-viewport hero.
- Header row about 88px tall: wordmark left with 64px padding, nav right with three icon links and a red outlined Sponsor button (about 96x28px, 2px radius, 1px red border, heart icon).
- Headline block on the left at about 18% from the top, left edge at 7% of the width, column about 22% wide.
- Dial centred at about 50% x, 50% y, diameter about 48% of the frame width, overlapping the headline column's right edge visually but not the text.
- Bottom-left button row at about 88% height: install chip (about 144x42px, slightly lighter fill #2F2D2B, 2px radius) and an outlined Learn more button (1px #555 border, same height).
- No shadows except the neon glows; square-ish 2px corners throughout.

## Elements
- Outer ring: six arc segments with small gaps, each a different neon (green, red, amber, cyan, lime, yellow), 4px thick, with a soft 12px glow.
- Tick ring: dense radial tick marks just inside, in dim red and grey, a few longer at intervals.
- Inner tracks: two thin dark concentric circles and a translucent grey crescent highlight on the upper left.
- Diamond: about 50 horizontal red lines whose lengths form a four-pointed star, centre line longest, thin vertical spine.
- Easing curve: about 30 red dots tracing an ease-in curve from lower left to upper right, dots increasing in spacing.
- Pink arcs: three short concentric arcs in the lower right, salmon pink, like a motion trail.

## Motion
Static image. A subtle idea: rotate the tick ring slowly (one turn per 60s), let the dotted curve redraw itself from left to right every 3s with an ease-in timing, and have the red lines of the diamond expand and contract like an audio meter.

## Rebuild it
1. React hero `min-h-screen bg-[#262422] text-[#E6E4E0] grid grid-cols-[minmax(0,380px)_1fr] px-16`.
2. Headline `text-6xl font-bold leading-none tracking-tight` in Outfit; subline `text-lg opacity-80 mt-6`.
3. Dial as one SVG (viewBox 600x600): six `circle` elements with `stroke-dasharray` arcs for the neon segments plus a `filter` using `feGaussianBlur` for glow.
4. Ticks: map 180 `line` elements rotated around the centre; diamond: 50 `line` elements with lengths from a triangle function.
5. Easing dots: sample `t^3` for 30 points along the curve and render `circle r=5`.
6. Animate with Motion: `motion.g` with `animate={{ rotate: 360 }}` (60s linear, repeat) for ticks, dot `pathLength`-like reveal via staggered opacity, and diamond line `scaleX` pulsing with `repeat: Infinity, repeatType: 'mirror'`.
7. Bottom buttons: a mono code chip with a copy icon using the Clipboard API, and an outlined button with `border border-neutral-600 rounded-sm`.

## Generation prompt
A dark charcoal developer-tool website hero: a bold rounded sans headline on the left, and on the right a large glowing circular instrument dial made of rainbow neon ring segments in green, red, amber and cyan, dense fine tick marks, a red four-pointed diamond made of stacked horizontal lines, a dotted red easing curve sweeping across, and a few salmon arcs; a monospace install chip and an outlined button at the bottom left; technical, precise and playful.