Create a WebGL slider for a fictional seed company, Hedgerow Seed Co., on deep moss (#16231a) with cream text (#f4ecd8) and marigold (#f2a93b): brand, a "Seed tin 0" pill and the serif headline "Sow this spring, nine packets from the hedgerow". Paint nine seed packets once into a 2048px canvas atlas (512 by 672 each): speckled paper, a coloured top band with the brand and number, an arched window with a canvas drawn flower (poppy, cornflower, sunflower with a golden angle seed head, daisy, sweet pea, foxglove, nasturtium, borage, radish), a serif name, the Latin name and "SOW MAR TO MAY" with the price. Render them in plain WebGL as 24 by 4 triangle grids. The vertex shader bends the row onto a smile shaped arc of radius 1900px (600px on phones) and adds a shaded ripple whose strength follows drag speed. The centre packet is 8% larger and others dim 12% per step, over a soft shadow pass drawn with a rounded rectangle distance field. Drag with momentum and a 0.1 snap; wheel and arrow keys step, clicking centres a packet, and the row loops. Below, the name, a twelve month calendar with sow months in marigold, the price and an "Add to seed tin" toggle. Fall back to 2D canvas without WebGL, and drop the ripple 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 painting your own products into the atlas.
About this WebGL slider
Most sliders move flat rectangles. This WebGL slider treats each card as a sheet of paper. The nine seed packets are painted once into a single texture, then drawn as fine grids of triangles so the vertex shader can bend them. The whole row sits on a wide curve that lifts at both ends, and when you drag fast a ripple runs through every packet, with a little shading so the paper seems to catch the light.
The artwork is generated with canvas drawing calls, from a sunflower head laid out on the golden angle to foxglove bells climbing a stem, so nothing is downloaded. The details below the row change with the packet in the middle, including a twelve month calendar that shows when to sow and when to expect flowers. Without WebGL the same layout falls back to an ordinary canvas.
Why the prompt works
- It names the technique, one atlas texture and segmented quads, which keeps it to a few draw calls.
- It gives the arc radius for desktop and phones, so the curve stays gentle on both.
- It ties the ripple to drag speed, so the effect only appears when you move it.
- It asks for a fallback and a reduced motion version.
Where to use it
Shops with a small range of printed goods, such as seeds, tea, stationery, books or records.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
