Design a product row for a fictional pin maker, Waymark Pin Co., on a dark green felt page (#12302a): a gold (#e8c46a) uppercase label, the serif heading "Trail pins in hard enamel and gold" and one line of detail. Below, three backing cards (#f6eedd, 14px radius) with a punched hole, each holding an SVG enamel pin up to 170px: Glowworm, a gold lantern with a teal (#1e5a57) body and flame window; Skylark Crest, a round sunset badge with a "300 made" chip; Tidepool, a silver shield with waves (#7fd0d6, #1d5c86) and a coral starfish. Give each a drop shadow and a faint fixed gloss. The shine effect: inside each pin, clipped to its outline, a white band 16px wide plus a thin 5px band, skewed 22 degrees, sweeps from left to right over 1.05s with cubic-bezier(.3,.55,.15,1). It plays on hover, when the Add button gets keyboard focus, on tap and on click, while the card lifts 4px and the pin tilts 4 degrees. Below each pin, the name, a short line, the price and an "Add pin" button that toggles to "Added". On touch screens, or with no mouse movement for 3s, the shine passes over each pin in turn every 1.5s. On phones the cards become a scroll-snap row. Reduced motion turns the sweep off.
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 drawing your own pins or badges and keeping the shine clipped to their outline.
About this shine effect in CSS
A shine effect only convinces when the light stays on the object. Here each enamel pin has two white bands, one broad and one thin, that slide across it at an angle, and they are clipped to the exact outline of that pin. The light never spills onto the card behind it, so the lantern, the round badge and the shield each read as polished metal and glass rather than a flat picture with a stripe on top.
The sweep is a single CSS keyframe on an SVG group, so it costs almost nothing. A faint, fixed gloss stays in the corner of each pin between sweeps, which keeps them looking glossy at rest. The cards lift and the pins tilt slightly on hover, and on phones the light passes over each pin in turn so nobody misses it.
Why the prompt works
- It insists on clipping the shine to each pin outline, the detail that sells the material.
- It gives the band widths, angle and easing, so the sweep is quick and natural.
- It describes all three pins with their metals and enamel colours.
- It plans for touch and keyboard, with an automatic pass and a focus trigger.
Where to use it
Merch shops, badges and achievements, premium product tiles and award pages. Keep it to objects that would really shine, such as metal, glass or foil.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
