Aritro

Project Card

A layered pipeline card built as three visual shells — the drag wrapper, the card chrome with a four-layer shadow system, and interior content zones that each respond independently. The footer reveals on hover via a CSS grid-template-rows transition, tags animate between positions with shared layoutIds, and a two-step picker lets you add tags with a reason in a single flow.

Tag & Label Editor

Two flavors of the same editing pattern — tags use tinted fills with colored borders derived from a single hex, labels use solid fills with white text. Both open an inline popover with a measure-input name editor and a two-row color picker. Labels add a visibility toggle with an animated EyeOff icon.

Comment Ball

A draggable comment pin on a design canvas. At rest it's a 32px avatar bubble with a speech-tail corner. Hover morphs the container open to reveal a preview — no opacity fade, just the physical expansion clipping content into view. Click opens a full thread panel anchored to the ball with a reply input.

1.0 ×

Sarah K.2m ago

@james Can we shift this section down? Feels too close to the header.

2 replies

James R.14m ago

@priya This gradient feels off on the edges.

Priya M.1h ago

Love this gradient treatment. Ship it.

1 reply

hover, click, or drag the pins

Sidebar Backdrop

A gradient-masked blur veil that appears when expanding a project card sidebar. Three CSS layers work together — a warm gradient background, a 16px backdrop blur, and a feathered mask that fades both in over ~160px — creating depth without modality.

Stacked Input

A multi-step form input that stacks previous entries as the user progresses, creating a compact layered effect. Each completed step slides beneath the current input.

Action Toolbar

Inspired by @mrncst

An expandable action toolbar that morphs between collapsed and expanded states. Cards within the toolbar animate in with staggered timing and spring physics.

Dynamic Island

An iOS-style dynamic island that transitions between multiple states — idle, ringing, and timer. Each state morphs the container shape and reveals different content with layout animations.

Tab Bar

An animated tab bar using clip-path transitions and mix-blend-mode. The active indicator smoothly morphs between tabs with a spring animation, inverting the text color of the selected tab.

Clean Button

A state-based button that transitions through idle, loading, and success states. The label, icon, and background color all animate together with coordinated timing.