Sliders with a slingshot temper. Two slingshot rows sit apart from two rope rows that twist like actual rope: bright red where the rope is pulled taut, near-black in the slack. Stretch a thumb or pull a rope and a dotted trajectory ends exactly on the predicted landing spot while the value field previews it live. Flying knobs knock the letters off their labels, landings shake the panel, and every knob, sounds included, is tunable in DialKit.
Build prompt
SliderBuild an Angry Birds–style take on sliders: a real DOM settings panel over an effects canvas, two slingshot rows and two rope rows with extra space between the two families so they read instantly. The rope rows look like rope: a twisting strand pattern over a red gradient that falls to a much darker red, lit where the rope is taut and near-black along the slack span. Sling thumbs can be grabbed and stretched in any direction; launch velocity comes from the stretch vector, and while aiming, a dotted trajectory computed by the same fixed-timestep integrator (240 Hz, gravity, air drag) the projectile then flies ends exactly on the predicted landing. The value field previews the landing value live in the accent color, dimmed when the shot would miss its track. Clicking a track glides the fill to the spot with a sharp S-curve while the thumb snaps instantly. Rope rows are grabbable anywhere along the line: pulling down bends the rope through the grab point and flings the knob on release, with the canvas-drawn bend rendered in the same twisted-rope style. Landings squash the thumb, ripple the line, and shake the panel; ground impacts throw smoke and bounce with restitution. Every label letter is a physics body: knobs knock them off, they tumble, settle, and restore after a few seconds. Synthesize all audio with the Web Audio API: stretch creak, whoosh, rope boing, letter knocks, thuds, ticks, and a bomb mode where every landing explodes. Expose everything in a DialKit panel: look, physics, trajectory dots, destruction toggles, sound, animation speed, Knock All Labels and Bring Letters Back actions, and presets like Moon Gravity and Heavy Iron.
Append your stack, content, and brand constraints before handing it to your agent.