Motion.
Water ripples, nets bob and leaves sway. The camera and stonework stay still.
Ambient loops.
1080p loops, with a still poster for each scene.
4 places · 8 loops
Reduced motion is on. Loops play only when you choose Play loop.
Bay and bridge
Day
6 s · 1920 × 1080 · 28.3 MB
Night
6 s · 1920 × 1080 · 27.6 MB
Pavilion terrace
Day
6 s · 1920 × 1080 · 26.9 MB
Night
6 s · 1920 × 1080 · 26.6 MB
Coastal village
Day
6 s · 1920 × 1080 · 24.1 MB
Night
6 s · 1920 × 1080 · 23.4 MB
Doorway courtyard
Day
6 s · 1920 × 1080 · 13.8 MB
Night
6 s · 1920 × 1080 · 14.5 MB
Two kinds of movement.
Keep pixel motion and interface motion separate. Neither changes the mark’s geometry.
Art at 12 fps
A six second crossing has 72 deliberate frame positions. The texture does not smear between them.
UI at 300 to 600 ms
Hover or focus to see a 450 ms response. Use cubic-bezier(.22,1,.36,1), as the live sites do.
The loops.
Use the supplied poster when motion is unavailable. Playback starts only when the reader chooses it.
Export settings.
Keep loops short, silent and legible at feed size.
| Setting | Art loop | UI demonstration |
|---|---|---|
| Frame motion | 12 art phases per second inside a 24 fps ambient video. | Capture at 30 or 60 fps. |
| Length | Crossing 6 to 8 s; ambient water 6 s. | Only as long as the action needs. |
| MP4 | H.264 compatibility copy; use WebM for website artwork. | H.264; AAC LC if audio is present. |
| GIF | Full-HD companion; use video for website playback. | Prefer MP4 for UI so text remains readable. |
| Resolution | Use the dimensions recorded beside each export. | Capture at 2× native CSS size or greater. |
| Loop | Continuous position and speed through the repeat. No end pause. | Show a clear start, action and result. |
| Easing | Slow periodic ripples, floating nets and anchored foliage sway. | 300 to 600 ms, cubic-bezier(.22,1,.36,1). |
| Poster | A representative frame with useful alt text. | A frame that shows the action’s context. |
Reduced motion.
Respect the operating system preference. Show a poster and keep all information available.
Still is complete
The kit does not autoplay video. The animated specimen stops under prefers-reduced-motion: reduce. Buttons keep their labels and focus state without movement.
Studio and social exports should have a useful poster. Avoid flashing, rapid zooms, parallax and movement that carries the only explanation.
What stays still.
Keep the mark, type and functional diagrams crisp.
- Do not open the logo’s door, bend the arch or separate the parts.
- Do not animate a headline word by word or scramble data.
- Do not move the camera through a pixel scene.
- Do not show a product completing a transfer faster than the actual flow.
- Do not interpolate frames to smooth an engraved pixel loop.