Create a menu hover effect for a fictional dance school called Sprung. The page is peach cream (#fbefe4) with deep plum text (#2a1533): a round logo, "Spring term starts Mon 12 Jan", a plum "Book a trial class" pill, a small uppercase heading "Pick a style" and five full width rows separated by 2px plum rules that share the remaining height. Each row is a link with the style name in heavy type up to 84px on the left and a detail on the right: Contemporary (Ages 14+, 6 classes), Ballet, Hip hop, Tap and Salsa. When the pointer enters a row, a coloured band slides in from the edge it crossed, top or bottom, over 600ms on cubic-bezier(.7,0,.2,1), while its contents counter slide so they look fixed in place. Inside the band runs an endless 14s marquee of the style name, star and ring shapes and outlined pills with class times like "Mon 6.30pm" and "Floor work". The band leaves through whichever edge the pointer exits. Colours: tangerine (#ff8a3d), pink (#ff5fa2), lime (#c6f04c), cobalt (#3956ff) with cream text, teal (#19b3a6). Keyboard focus brings the band in from the top. On touch screens, which have no hover, the band walks down the list every 2.6s and a tap lights that row and shows a plum toast with the next class. Reduced motion stops the marquee.
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 renaming the rows and choosing one colour per row.
About this menu hover effect
This menu hover effect knows which way you came in. Move the pointer down onto a row and its coloured band slides in from the top; come up from below and it rises from the bottom. Leave and it exits through the edge you crossed, so sweeping up and down the list feels like the colour is following your hand rather than switching on and off.
Inside each band a slow marquee repeats the style name with class times and small shapes, which turns a plain list of links into a taste of each class. The contents slide the opposite way to the band, so the text appears to sit still while the colour wipes over it. On phones, where there is no hover, the band walks down the list by itself until someone taps.
Why the prompt works
It explains the direction rule, enter and leave by the edge the pointer crossed.
It mentions the counter slide, the detail that keeps the marquee steady.
It lists every row with its colour and copy.
It gives touch screens their own behaviour instead of a dead list.
Where to use it
Schools, festivals, agencies and portfolios with a short list of big, important destinations.
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.
