back to home

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 @dejager
  • product-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 @aydahnizzy
  • ripple-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.