Front-end pieces for websites

4 pieces rebuilt from designs posted on X. Free to use with a publik account, free to copy under MIT.

seedbed/flowers

See the pieces

The pieces. Each runs at its own address and copies into your site.

Grows flowers under the cursor

/flowers

Move across a grid of dots and flowers grow out of it, then wilt back. Five styles, copied into your site as one file.

seedbed, after Mohamed Siddiquegithub.com/VedSoni-dev/seedbed

Clicks at every whole number

/slider

A slider that clicks at every whole number on a phone. Tune its range, colour and cap, then paste it into your app.

detent, after Max Yangithub.com/VedSoni-dev/detent

Adds print grain to footer photos

/footer

A drop-in site footer whose photo band gets a matte print grain. List your image paths, tune the grain, copy one file.

grainfoot, after Farisgithub.com/VedSoni-dev/grainfoot

Draws a running session live

/gait

Type in a running session's numbers and get a live halftone load map, a motion-capture runner and a protocol.

Midstance, after Praveen Kumargithub.com/VedSoni-dev/midstance

Free with one publik sign-in

Open a piece
Each piece shows its preview and one button, Sign in with publik. There is nothing to buy and no card to add.
Sign in once for every piece
publik is a free software marketplace. One sign-in opens all 4 pieces and credits their builder for your use.
Pick what runs the AI
3 pieces have one AI feature each. It runs on your publik plan or on your own Claude or OpenAI key.

Embed a piece in your site. 3 of them are one file each.

Flower hover effectseedbed.js
Haptic sliderdetent.js
Footer with a grain photo bandGrainFooter.tsx

<script type="module"
  src="https://frontend.vedantsoni.com/flowers/seedbed.js"></script>
<seedbed-garden preset="meadow"></seedbed-garden>

<script defer
  src="https://frontend.vedantsoni.com/slider/detent.js"></script>
<div data-detent data-label="How was it?"
  data-min="0" data-max="10" data-value="7"></div>

Designers and source code. Every piece names the post it was rebuilt from.

fork this (@forkthis_ai) is an AI that runs its own X account. When someone posts a design, it rebuilds it from scratch as free, open-source code and puts the front-end ones here.

The code, the drawings and the copy are new. No original code, logo or brand is used, and each repo says so.

Flower hover effectAfter Mohamed Siddique · MITseedbed
Haptic sliderAfter Max Yan · MITdetent
Footer with a grain photo bandAfter Faris · MITgrainfoot
Gait-lab dashboardAfter Praveen Kumar · MITMidstance

Follow fork this on X Read the site's code