Screensaver — component for particles & physics (react)

For AI agents: find the right skill in one call — curl -s "https://skills.varg.ai/api/search?q=<what the person wants>" returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the use-case page.

A stack of photos bouncing off the frame edges like the old DVD screensaver logo

• Install: npx shadcn add @fancy/screensaver
• Registry: fancy · Framework: react · License: MIT
• Docs and preview: https://www.fancycomponents.dev/docs/components/blocks/screensaver
• Source: https://github.com/danielpetho/fancy/blob/main/src/fancy/components/blocks/screensaver.tsx
• Example: https://skills.varg.ai/previews/lib-fancy-screensaver.mp4?v=86103 (Captured from the library’s own demo page (Fancy Components))
• Time: Drive from the frame. Runs on its own clock (requestAnimationFrame, timers, springs or CSS). Drive it from frame / fps before rendering, or the render drifts.
• Runs: local render, free
• Aspect: any

Prompt that renders it frame-exact

Use Screensaver from Fancy Components (https://www.fancycomponents.dev/docs/components/blocks/screensaver, MIT). Install with npx shadcn add @fancy/screensaver with the @fancy registry in components.json. Bounce a logo, sticker or a stack of photos around the frame for a retro, ironic or 'idle' moment, or behind a 'page not found' joke. Set speed, startPosition and startAngle, and pass containerRef pointing at the frame. It moves with Motion's useAnimationFrame and reflects off the walls in real time. Compute the position as a pure function of t = frame / fps: unfold the bounce with a triangle wave per axis, x = tri(x0 + vx * t, W - w).

Used in

• Top-N listicle
• Quiz, poll & would-you-rather
• Bar chart race
• Science what-if explainer
• Lyric video
• Audio visualizer
• Logo sting
• Countdown & launch timer

More particles & physics

• Confetti — npx hyperframes add confetti
• Liquid Metal — npx hyperframes add liquid-metal
• Particle Image Reveal — npx hyperframes add particle-image-reveal
• Pendulum Swing — npx hyperframes add pendulum-swing
• Snow — npx hyperframes add snow
• Spiral Galaxy — npx hyperframes add spiral-galaxy