Rings, stacks, statuses, frames and hover reveals.
Avatars are a solved shape with three unsolved details: what shows before the image loads, what shows when it never loads, and how you stack a group without the overlap eating the faces. These cover all three — initials fallback, a ring that survives dark mode, and a stack whose z-order runs the way the eye reads.
Initials avatar with a soft blue halo that widens on hover.
Avatar wrapped in a rotating ocean conic ring — the "story" ring pattern, in pure CSS.
Image tile that zooms under a darkening scrim while the caption slides up — swap the gradient for your own <img>.
Media tile that sits in grayscale until hover, then restores full ocean color.
Overlapping avatar group in ocean that fans out on hover, with an overflow chip.
Blue avatar with an online dot that emits a ring — the presence pattern every collaborative app ships.
Editorial thumbnail with a grain-textured ocean image, bottom scrim and eyebrow tag — swap the gradient for an <img>.
Initials avatar inside a rotating ocean conic ring, with a pinging online dot.
Media tile whose caption bar slides up from below the frame on hover while the highlight drifts, marked up as a real figure and figcaption.
Four-segment ring turning around the avatar while the face counter-rotates at the same rate, so the initials stay upright.
Instant-photo mount tilted off-axis that straightens and develops on hover, the caption in monospace on the wide bottom margin.
Overlapped stack with a counted overflow chip, each face lifting out of the pile on hover with a background-colored ring keeping the seams clean.
Media tile whose controls rise into a dimmed frame on a stagger, using `transition-delay` so the sequence costs no keyframes.
Asymmetric three-up where the hero spans both rows, each tile lifting independently so the grid never reflows on hover.
Blurred low-resolution stand-in sitting under the full image, the sharp layer fading over it and the status pill dropping out once there is nothing left to wait for.
Profile photo wrapped in a conic progress ring that fills as the upload lands, with a camera affordance notched out of the lower-right corner.
Three prints squared up as one pile that spread from a shared bottom pivot, so the fan opens like a hand of cards rather than sliding apart in parallel.
The state every gallery eventually shows and few designs draw — a torn picture glyph over a hatched field, with the filename kept so the failure is diagnosable.
Initials on a gradient hexagon with a teal rim, the tile rotating a notch on hover while the letters stay upright.
Ringed initials avatar with a verified check badge tucked into the corner that pops larger on hover.
Circular avatar showing initials that flips over in 3D on hover to reveal the name and role on its back.
Voice-call avatar with rings that ripple outward from the disc to show the person is currently speaking.
Compact avatar-and-name pill that stretches on hover to reveal the person’s team beside their name.
Avatar wrapped in a checkbox label that shrinks inside a solid ring and sprouts a check badge when selected.
Showing 24 of 32. Search the rest →
Status pills, counters, chips and label variants.
Inputs, selects, checkboxes, radios and segmented controls.
Browser chrome, phone frames, terminals and screenshot surrounds.
Bars, sparklines, gauges and heat grids without a chart library.
Sticky headers, zebra rows, density variants and responsive stacks.
Vertical histories, horizontal steps and progress trails.