sketvane

A UI motion piece about sketch-to-product in a design tool, about 13.5 seconds, played once. On blue graph paper with a soft grain, a pencil draws a profile card by hand: a rounded frame, then a circle, a scribbled name, a wave, a pill with a knob and a long box. After each rough shape a blueprint selection box flashes around it with its size (460 × 580, 84 × 84, Text · 24/14, Chart · area, Toggle, Button · 404 × 62, Avatars · stack) and the strokes blur away as the real component fades in: the white card, the avatar with its online dot, the name and handle, a weekly-listeners stat whose orange area chart draws itself while the number counts up to 12,480, a notifications toggle, a Follow button and a row of mutual followers. Handwritten notes in Caveat point things out (profile card, round avatar, alive not static, big obvious CTA) and fade back once it's built. At the end the pencil turns into a pointer, the toolbar switches to select, it flips the toggle with a click ripple and taps Follow, which slides to Following and adds one to the follower count. From then on the toggle and the button work for real, by mouse, touch or keyboard. The strokes are procedural rough paths from a seeded random sequence, so every run draws the same lines; the 1080 × 1080 stage scales to fit any window, and the paper runs on to the window's edges. Reduced motion shows the finished card at once.