ISby Informeek Studio·Made with Claude·11 November 2026
LiveRun the cursor along the dock, then click an icon
The prompt
Claude · Claude Opus 5.5
Build a macOS style dock with magnification at the bottom of a light page with soft pink, blue and mint gradient blobs (#f6f4f1 base). The dock is a frosted glass bar (white at 55% opacity, 18px backdrop blur, 24px radius, soft shadow) holding six 56px rounded-square app icons with gradient fills and white line icons: Home (blue), Music (red), Messages (green), Photos (orange), Calendar (violet), a thin divider, then Settings (grey). As the pointer moves along the dock, each icon scales up to 1.75 times based on its horizontal distance from the pointer within 150px, using a cosine falloff so neighbours grow a little too; icons grow upward from the bottom edge. Show a dark tooltip with the app name above the hovered icon. Clicking an icon makes it hop up and down once and moves a small dot under it to show it is open. On phones, skip magnification and stretch the dock into a full-width bottom bar with the calendar hidden.
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 swapping in your own sections or apps and their colours.
About this macOS dock effect
The macOS dock is one of the most recognisable pieces of interface design, and this version brings its magnification to the web. As the cursor slides along the frosted bar, the icon under it grows to almost twice its size and its neighbours swell a little, so the row ripples rather than one icon popping. Icons grow upward from their base, just like the real thing.
Clicking an icon gives it a single hop and moves a small dot underneath to show it is open. A tooltip names each app, so the icons do not have to carry all the meaning. On a phone, where there is no cursor to follow, the dock becomes a full-width bottom bar with slightly smaller icons.
Why the prompt works
It gives the maths in words: 1.75 times, 150 pixels, a cosine falloff.
It lists every icon and colour, so the dock looks finished.
It describes the glass with opacity and blur values.
It has a separate phone layout.
Where to use it
Portfolio navigation, app launchers, dashboards and playful product sites. Five to seven items is the comfortable range.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
We use cookies to measure how the site is used and, if you allow it, to show advertising. Prompts you copy and previews you try are never collected. See our privacy policy.