Build an orb animation for a singing teacher's hero, drawn by one WebGL fragment shader on a near black page (#07060f). Place it at 70% across on desktop and above the copy on phones. Inside, fill it with four octave value noise, domain warped and drifting, mixed between a deep and a bright colour with highlights in a third, dim at the centre and bright towards the edge. Let the edge breathe with two slow sine wobbles, bulge up to 0.085 radius towards the pointer when it is near, and draw a thin white hot rim plus a soft outer glow. Give each pentatonic note its own three colours, C coral (#ff7a8f), D amber, E mint, G violet (#5b7bff and #b58cff) and A magenta, and blend to the new set in about 0.3s. Singing a note shivers the edge and sends one ring outward. Add five 44px round note buttons that fill with their colour when pressed. Tapping the orb moves up the scale, and after 2.5s idle the pointer circles the orb and it climbs a note every 4.2s. Copy, a lilac label "Tilbrook Voice Studio", a 72px serif headline "Find the voice you hum when nobody is listening", one line, a pale pill "Book a first lesson" and a note "First half hour is free". Render at 70% resolution with a still frame for reduced motion.
Written by Informeek Studio to recreate this design. Prompts are not deterministic: running it again gives a similar result, not an identical one.
Use it in three steps
- Copy the prompt with the button above.
- Paste it into your tool, such as v0, Lovable, Bolt or Claude.
- Make it yours by changing the five note palettes to match your brand.
About this orb animation
An orb animation gives a page a living centre, something that seems to listen. For a singing studio that idea fits perfectly. A glowing shell of drifting gas floats beside the headline, its edge breathing gently and leaning towards the cursor as you come close. Below the copy sit five notes of the pentatonic scale. Tap one and the orb takes on that note’s colours, coral for C, amber for D, mint for E, violet for G and magenta for A, with a shiver along its edge and a ring of light spreading outward, as if it had just sung.
All of it is one shader. The inside is warped noise mixed between three colours, kept dim at the centre and bright towards the rim so it reads as a lit sphere rather than a flat disc. When nobody is touching the page the orb slowly works its way up the scale on its own, which gives phone visitors the whole show.
Why the prompt works
- It brightens the edge, not the middle, the detail that makes it look hollow and lit.
- It ties colour to real notes, so the toy suits the business.
- It caps the bulge, keeping the orb round and calm.
- It walks the scale when idle.
Where to use it
Music teachers, choirs, audio apps, meditation and voice products, and any dark hero that needs a calm focal point.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
