Animazioni

Footer col logo che mostra i nodi bezier

Passi sulle lettere del logo gigante nel footer: si accendono di verde neon e mostrano il tracciato vettoriale con le maniglie.

Settori: fintechai
Colori: near blackneon greengrey
Stili: darktechnicalneon
Categoria: footertypography

Vedi originale

REFERENCE
- Gallery page: https://magpui.com/en/i/wordmark-footer-that-shows-its-bezier-nodes-79387a
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/wordmark-footer-that-shows-its-bezier-nodes-79387a/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/wordmark-footer-that-shows-its-bezier-nodes-79387a/clip.mp4
- Original post: https://x.com/creativestefan/status/2112087657421435073 by @creativestefan
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.

BUILD
A dark footer with link columns and an oversized lowercase wordmark at the bottom. Each letter is an SVG path; on hover the letter fills neon green and shows its anchor points and bezier handles like a vector editor.

DESIGN SYSTEM
- Background #0E0E0E, link text 13px #9A9A9A, headings 12px #666.
- Wordmark spans full width, light weight, fill #1E1E1E by default.
- Hover fill #B6FF3B; anchors 5px white squares, handles 1px #B6FF3B lines with 4px circles.

MOTION
- Letter hover: fill transitions in 200ms; anchors and handles fade and scale from 0.6 to 1 with 15ms stagger along the path.
- Leaving: fade out over 300ms so a quick sweep leaves a short trail of lit letters.

SECTIONS
- Link columns.
- Legal text.
- Interactive wordmark.

IMPLEMENTATION
- Inline SVG, one path per letter; precompute anchor and handle points from the path data at build time.
- Decorative only: aria-hidden on the overlay.
- prefers-reduced-motion: skip the animation and show the end state.

ADAPT TO THE PROJECT
- Reuse the project's existing tokens, components and fonts; map colors to the closest existing tokens.
- Do not copy logos, brand names, characters or artwork from the reference. Use neutral placeholders.

SUCCESS CHECK
- Nodes sit exactly on the letter outlines.
- Sweeping the cursor across lights letters one by one.
- Wordmark scales with viewport width without reflow.

1
Installa la skill
Lancia questi comandi una volta in Claude Code. La skill dà all'agente il mestiere per questo tipo di pezzo. Con altri agenti, segui le istruzioni nella pagina della skill.
frontend-design
```
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
```
2
Incolla il prompt nel tuo agente
Premi Copia prompt qui sopra, apri il progetto nell'agente e incollalo. Il prompt contiene i link ai fotogrammi originali, così l'agente li guarda prima di costruire.
Claude Code Codex
3
Confronta con l'originale
Mettili uno accanto all'altro. Se qualcosa non torna, di' all'agente cosa esattamente: tempi, dimensioni, colori o spazi.

Installa la skill

Incolla il prompt nel tuo agente

Confronta con l'originale