Feature tiles
A feature grid where each tile carries a small abstract scene of what the feature does.
Live grid
Scroll it into view, hover a tile with a mouse, or tab to it to replay.
Photographs, not gradients
Atmosphere comes from motion-blurred natural photos. One solid surface lands on top.
One solid focus
Exactly one surface is crisp. Its neighbors stay tinted and quiet.
Concentric corners
Inner radius is the outer radius minus the inset, so curves stay parallel.
Warm ink, one yellow
Neutrals are warm. Yellow marks the one primary action or the result.
Plays once, then rests
A scene runs when it is seen, shows action and result, and stops on the result.
Ready for agents
The specification ships as a skill, so generated UI starts on-brand.
Anatomy
- 1One card with a 28px radius; cells are divided by 1px hairlines over the border color.
- 2The art panel sits 8px inside the cell with a 20px radius, a faint inner ring and a 45° hairline texture.
- 3The scene is centered, about 126 × 118px, built from bars, mini windows and fields. No screenshots, no real text.
- 4Yellow appears only on the result of the scene.
- 5A 32px icon chip sits top-left; its glyph redraws stroke by stroke as the tile plays.
- 6Title and one line of description sit under the art, outside it.
Playback
- 1Each tile plays once at about 70% visibility, 200ms later; tiles that arrive together start 250ms apart.
- 2One played attribute drives every animation. Replay removes it, forces a reflow and adds it back.
- 3On mouse hover or keyboard focus the final frame blurs out over 160ms, the scene restarts under the blur, and the blur clears.
- 4While the mouse stays, the tile replays 600ms after each play ends. Touch follows the link.
- 5Hover warms the cell, deepens the panel ring and grows the chip from 32 to 36px from its top-left corner.
- 6With reduced motion, every tile shows its final frame.