5d:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rc641binzbjp.js","/creators-assets/_next/static/immutable/chunks/12ci1vsd8nj4u.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ply_q-h6u_2z.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1pb7yncyfm9fe.js","/creators-assets/_next/static/immutable/chunks/1j6jg0y72xk13.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/03itqfxm4gmj8.js","/creators-assets/_next/static/immutable/chunks/114fkj16mhe97.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/16inv17cv83xq.js","/creators-assets/_next/static/immutable/chunks/2760bhhttj0zo.js","/creators-assets/_next/static/immutable/chunks/3_z6gb0g1nigd.js","/creators-assets/_next/static/immutable/chunks/3vlbhrh3-zofo.js","/creators-assets/_next/static/immutable/chunks/120bipr4k16wv.js","/creators-assets/_next/static/immutable/chunks/3ea2l_ol8wqqa.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1zr4ew02k6y_l.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/08ajsjh8ypdt2.js","/creators-assets/_next/static/immutable/chunks/1ddgh6mv1wg4x.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3t6k2_m2gc3-k.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0w6oa8_ba59u4.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/3c3kl-ixsd844.js"],"PostDetailCard"] 5e:Tfd3,

Idle Bounce Screensaver for Framer

Idle Bounce Screensaver is a production-ready idle screensaver component for Framer. It activates automatically after a period of user inactivity and displays a single element that moves across the screen and reacts when it reaches the edges of the viewport.

The behavior is intentionally simple and predictable. The component is designed specifically for idle states and does not rely on scrolling, hovering, or clicking.

How it works

After the user is inactive for a defined amount of time, the screensaver becomes visible and begins autonomous motion.

The component uses a single animation loop to update position continuously. Reactions occur only when the moving element reaches the screen boundaries.

When the user interacts again using the mouse, keyboard, or touch, the screensaver immediately disappears and the inactivity timer resets.

Content modes

Idle Bounce Screensaver supports two content modes, both powered by the same motion system.

SVG mode

Upload or paste a custom SVG logo or icon
The SVG moves across the screen
The SVG color changes when it reaches a screen edge
Color changes occur only on boundary contact

This mode is suitable for personal branding, portfolios, and studio websites.

Image mode

Provide a list of images
Only one image is displayed at a time
When the image reaches a screen edge, it switches to another image
Image changes are event-based, not time-based

This mode works well for visual portfolios, creative landing pages, and ambient background visuals.

Optional motion trails

An optional motion trail effect can be enabled to create a softer visual appearance.

Important notes:

Motion trails are visual only
Motion behavior does not change
Trails are disabled by default
Trails do not influence speed, direction, or collision logic

This ensures the screensaver remains consistent and stable.

Layout compatibility

Idle Bounce Screensaver is designed to work safely inside real Framer layouts, including:

Pages
Sections
Stacks
Fixed overlays

The component does not interfere with scrolling or layout structure and can be layered using standard positioning and z-index controls.

Property controls

The property panel is intentionally minimal and exposes only meaningful controls:

Content mode (SVG or Images)
SVG or image input
Inactivity timeout
Motion speed presets
Element size
Motion trails toggle

Internal motion values are not exposed to ensure reliable behavior.

Performance considerations

Single animation loop
No scroll listeners
No unnecessary visual effects
Stable defaults enabled

The component is optimized for predictable motion and consistent performance.

Common use cases

Idle Bounce Screensaver can be used for:

Portfolio idle states
Creative studio websites
Personal brand pages
Display or kiosk websites
Ambient background visuals

Purpose

Many websites do not define a clear visual state when the user is inactive. This component provides a simple and recognizable idle behavior without competing with user interaction or page content.

Summary

Idle Bounce Screensaver is a Framer component that creates a classic bouncing screensaver effect. It activates after inactivity, supports SVG logos and image swapping, includes optional motion trails, and is safe to use in real Framer layouts.

5a:[["$","$L5d",null,{"post":{"id":"019c532c-0631-72f2-a366-30c400db6584","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7fd40dc2-5d88-48bc-bbee-09cf536c40ce","name":"Antony Raphy","slug":"antony-raphy","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7fd40dc2-5d88-48bc-bbee-09cf536c40ce/oqu6u53f","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"o8j0gB5nG8OemByIxzyE","resolved":true,"title":"Bounce Screensaver","body":"$5e","bodyJson":null,"introduction":"Classic idle screensaver for Framer","slug":"bounce-screensaver","author":{"framerUserId":"7fd40dc2-5d88-48bc-bbee-09cf536c40ce","name":"Antony Raphy","slug":"antony-raphy","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7fd40dc2-5d88-48bc-bbee-09cf536c40ce/oqu6u53f","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/o8j0gB5nG8OemByIxzyE/bounce-screensaver-0VTIgHScpkgWcEFZ3MKYh5F8JJahWB","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-01T21:35:06.855Z","updatedAt":"2026-04-30T18:49:35.114Z","publishedAt":"2026-02-12T18:45:20.049Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://heartwarming-oval-184595.framer.app/","price":"5","paymentUrl":"https://buy.polar.sh/polar_cl_AZ8fh1EUfyQyI6rJE4o15FY5EIeY9iLeYTG3q0VP3hg","workshop":true,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"eNFg6LZnb4hMYaIaajbI","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-12T18:45:20.049Z","updatedAt":"2026-02-12T18:45:20.049Z","reported":false}}],"$L5f"]

Suggested for you