Playground
Sefunmi's interactive UI experiments and visual effects.
movie-canvas
An infinite movie poster canvas with draggable panning, repeated poster tiles, search, and similarity-based rearrangement around the selected movie.glasses
Switchable glasses on a fixed face preview. Each frame is assembled from DOM pieces, masks, ridges, and small marks instead of a flat image.vinyl-player
Album collections, a basket view, then a vinyl player. The record, cover, tone arm, controls, and track list share context cells, so the back action steps through those states instead of resetting the route.painting-wheel
A rotating painting wheel with a side collection panel and a routed detail layer. The selected painting is stored in the query string, which lets the wheel stage stay mounted behind the details.css-keyboard
A DOM keyboard with CSS depth, key presses, WPM tracking, sound packs, and theme controls. View mode passes rotation to the shared viewer. Type mode sends input into the keyboard.floating-books
Recreating the Stripe Press book wall in CSS, with each cover kept on its own transform layer. Selecting one locks the list, teleports the detail view to the body, and derives the page wash from the active book.wallets
Three CSS wallets, each packed with cards, notes, IDs, stickers, and tickets. The closing path is the awkward part: the shared wallet scope keeps the old view alive until its animations settle.three-dimensional-marquee
Editable text on a circular path, rotated through the shared 3D viewer. The text and color inputs write straight into cells, and the halo stays CSS-only. Original by @dejagerproduct-transitions
A masonry product grid where each card opens a routed detail page. Stable image IDs are reused between the list and detail states, which gives the transition a continuous anchor. Original by @aydahnizzyripple-effect
A click ripple across a responsive button grid. Each cell derives its row and column from its index, computes Euclidean distance from the active click, and uses that as its animation delay.curved-css-solid
A CSS solid made from regular elements, not WebGL. Width, height, depth, curve, color, rotation, dragging, and autorotate all sit in cells that feed the generated box faces and shared viewer.