Craft Lab

A collection of interactive components and experiments crafted with Vue, Tailwind, and GSAP.

Menu Toolbar

A responsive, floating navigation dock with active state tracking, theme toggling, and integrated music controls. Features a springy "eject" animation for the mini player.

VueTailwindGSAP
Home
Projects
Craft
Blog
Gallery
Light Mode
Mute Sound

Flip Clock

A realistic retro flip clock component. It breaks down time into individual digits, each animating with a 3D fold effect when the value changes.

VueCSS 3D
  • 0
    0
  • 1
    1
  • 2
    2
  • 0
    0
  • 1
    1
  • 2
    2
  • 3
    3
  • 4
    4
  • 5
    5
  • 6
    6
  • 7
    7
  • 8
    8
  • 9
    9
  • 0
    0
  • 1
    1
  • 2
    2
  • 3
    3
  • 4
    4
  • 5
    5
  • 0
    0
  • 1
    1
  • 2
    2
  • 3
    3
  • 4
    4
  • 5
    5
  • 6
    6
  • 7
    7
  • 8
    8
  • 9
    9
  • 0
    0
  • 1
    1
  • 2
    2
  • 3
    3
  • 4
    4
  • 5
    5
  • 0
    0
  • 1
    1
  • 2
    2
  • 3
    3
  • 4
    4
  • 5
    5
  • 6
    6
  • 7
    7
  • 8
    8
  • 9
    9

Simple Book

A 3D book that subtly opens on hover. Uses CSS 3D transforms to create the spine, cover, and page thickness effects.

VueCSS 3D
Book Cover

Design Systems

Alla Kholmatova

Interactive Canvas

An interactive drawing canvas with SVG turbulence filters. The line has a "wobbly" organic feel created by displacing the SVG path with noise.

VueSVG FiltersPointer Events

Music Album Player

An interactive vinyl record player. Clicking starts the track, slides out the sleeve, and spins the record. Integrated with the global `useAlbumPlayer` store.

VueHowler.jsAnimations
Keane center
Somewhere Only We Know by Keane

Somewhere Only We Know

Keane

Interactive Scratch Card

A scratch-to-reveal component using HTML5 Canvas. Supports touch and mouse input, plays scratch sounds, and detects the percentage revealed to trigger a completion animation.

VueCanvas APISound
Chess Pattern
PLAY PLAY PLAY PLAY PLAY PLAY PLAY PLAY
PLAY PLAY PLAY PLAY PLAY PLAY PLAY PLAY
Chess KnightChess King

Location Stamp

A decorative stamp component with a fixed rotation. Simple yet effective for adding visual flair to layouts.

VueTailwind
Abeokuta Stamp