Imperator Design
Library
Categories
Showcase
The library

Techniques, not templates

Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.

1 / 3

Staggered Reveals with sibling-index()

Five staggers, one function, and no :nth-child ladder anywhere: sibling-index() reads each element's own position in its parent, so rows added or reordered later re-stagger themselves. The list is the reel's code verbatim, animation-delay: calc(sibling-index() * 100ms). The equalizer drives three properties from one call: delay, height through sin(), and hue. Orbit uses the index as geometry rather than timing, rotate(calc(sibling-index() * 30deg)) translateY(-56px) for twelve dots with no coordinates. Grid turns the flat index into coordinates with mod() and round(down), whose sum sweeps a diagonal ripple. Each declaration sits after a plain fallback. Chrome 149+ and Safari 26.5.

animationcssstaggeredlistcustom-propertiesnth-child
2 / 3

Swipe to Reveal Actions

A fluid, native-feeling interaction where swiping a list item to the left reveals hidden action buttons behind it, which then snap open or spring back closed.

animationjavascriptlistinteractionswipedragcss transform
3 / 3

Staggered List Fade-in Animation

This effect makes a list of items appear one after another with a slight delay and a subtle lift, giving the perception of a lighter, more fluid loading experience compared to an abrupt, simultaneous appearance.

animationuxcssstaggeredlistfade-in