Animations make a site feel alive, but heavy or endless effects slow pages and can make some visitors feel unwell.
Respect reduced motion
Visitors can ask their device for less motion. Effects should switch off for them automatically.
Pause when hidden
An animation in a background tab only drains batteries. Stop it when the tab is not visible.
Keep the code light
A small script or CSS beats a large library. No extra images when shapes can be drawn.
Never block clicks
Decorative layers must let clicks pass through to buttons and links.
Give control
A small button to stop the effect, remembered on the next visit.
Snowly follows all of these rules. See the demo and more ideas for a festive website.
Frequently asked questions
What is prefers-reduced-motion?
A setting on phones and computers that asks websites to limit animations.
Do animations hurt Core Web Vitals?
Light canvas or CSS effects do not affect loading; heavy scripts can.
Should animations loop forever?
Only subtle decorative ones, and with a way to stop them.