50:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 51:T551,

About the Component: Rippler Button transforms a simple hover into a delightful interaction. As the cursor enters the button, a ripple originates from the exact point of entry and expands to fill the entire button, creating a smooth, responsive effect that feels both natural and engaging.

Features

Cursor-aware ripple animation
Ripple originates from the pointer's entry point
Smooth hover interaction
Lightweight and responsive
Fully customizable in Framer
Easy to drop into any project

Customization Options

From the properties panel, you can:

Change the button label
Customize colors
Adjust corner radius
Edit padding and size
Choose typography

Perfect For

Call-to-action buttons
Landing pages
Portfolio websites
SaaS products
Marketing pages
Modern UI designs

What's Included

Rippler Button component
Cursor-aware hover ripple animation
Fully customizable properties

52:T595,

Designed to feel lively without being distracting, it works great in hero sections, landing pages, or app previews.

Features

Animated image swaps: Smooth transitions between image sets with directional motion.
Icon-based navigation: Clickable icons let users switch categories instantly.
Auto-play support: Automatically cycles through categories after a delay.
Fully customizable content: Change images, labels, icons, and colors directly in Framer.
Clean, modern layout: Fixed tilt and spacing ensure consistent visual balance.

How it works

Each icon represents a unique category.
Clicking an icon:
- Current images slide out.
- New images zoom in from below.
If untouched, the component auto-rotates through all categories.

Customization options

Inside the Framer properties panel, you can:

Replace image sets for each category.
Change labels (e.g., Food, Travel, Shopping).
Change Colours (e.g. Background, Text and Icon)
Swap icons.

Perfect for

Product category highlights
App feature showcases

4f:["$","$L50",null,{"value":{"fallback":{"$inf$activity-creator-a01d34d2-7688-4859-a664-6498b91fb562-all:/unified/creator/a01d34d2-7688-4859-a664-6498b91fb562/activity/":[{"data":[{"id":"019ff69a-1631-74f4-84ca-3c61cca63a5f","type":"template.liked","target":{"type":"template","id":"70989","preview":"DENTIQUE","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/692f39c5-f4f2-4917-a261-1ea1f536bead/019fe688-ba0b-73bf-9c47-183d116c4a74.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"a01d34d2-7688-4859-a664-6498b91fb562","name":"Shakeb Mohammad","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132360/0nzT97YU--sxpkzCHCB9TU1X4nqzKfYIDLFynvUH","slug":"shakeb-mohammad","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-08-12T15:32:01.197Z","latestAt":"2026-08-12T15:32:01.197Z"},{"id":"019ff69a-046d-73ac-8b86-9805e3219979","type":"creator.followed","target":{"type":"creator","id":"692f39c5-f4f2-4917-a261-1ea1f536bead","preview":"baptiste.fort","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/692f39c5-f4f2-4917-a261-1ea1f536bead/dmo7gla4","slug":"baptistefort","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"a01d34d2-7688-4859-a664-6498b91fb562","name":"Shakeb Mohammad","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132360/0nzT97YU--sxpkzCHCB9TU1X4nqzKfYIDLFynvUH","slug":"shakeb-mohammad","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-12T15:31:56.648Z","latestAt":"2026-08-12T15:31:56.648Z"},{"id":"019fdcf1-8a5f-71cf-87d4-74c07bc06aee","type":"component.created","target":{"type":"component","id":"2EAvk97ztUPKYlEP51hr","preview":"Rippler Button","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a01d34d2-7688-4859-a664-6498b91fb562/019fdcef-18ba-734a-a44b-9da0b85ffeb2.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"a01d34d2-7688-4859-a664-6498b91fb562","name":"Shakeb Mohammad","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132360/0nzT97YU--sxpkzCHCB9TU1X4nqzKfYIDLFynvUH","slug":"shakeb-mohammad","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-08-07T15:57:24.959Z","latestAt":"2026-08-07T15:57:24.959Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:a01d34d2-7688-4859-a664-6498b91fb562:/unified/posts/?creator=a01d34d2-7688-4859-a664-6498b91fb562&with=reposts":[{"data":[{"id":"019fdcf1-88aa-71b9-bb3c-6635fa436536","title":null,"body":"

Transforms a simple hover into a delightful interaction. Button with a cursor-aware ripple hover effect.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Transforms a simple hover into a delightful interaction. Button with a cursor-aware ripple hover effect."}]}]},"author":{"framerUserId":"a01d34d2-7688-4859-a664-6498b91fb562","name":"Shakeb Mohammad","slug":"shakeb-mohammad","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132360/0nzT97YU--sxpkzCHCB9TU1X4nqzKfYIDLFynvUH","followed":false,"followsYou":false},"media":[],"resources":[{"id":"2EAvk97ztUPKYlEP51hr","resolved":true,"title":"Rippler Button","body":"$51","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"About the Component:","marks":[{"type":"bold"}]},{"type":"text","text":" Rippler Button transforms a simple hover into a delightful interaction. As the cursor enters the button, a ripple originates from the exact point of entry and expands to fill the entire button, creating a smooth, responsive effect that feels both natural and engaging. "}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cursor-aware ripple animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ripple originates from the pointer's entry point"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth hover interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lightweight and responsive"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully customizable in Framer"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Easy to drop into any project"}]},{"type":"paragraph"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Customization Options","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"From the properties panel, you can:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Change the button label"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customize colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust corner radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Edit padding and size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose typography"}]},{"type":"paragraph"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect For","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Call-to-action buttons"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS products"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Marketing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern UI designs"}]},{"type":"paragraph"}]}]},{"type":"paragraph","content":[{"type":"text","text":"What's Included","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Rippler Button component"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cursor-aware hover ripple animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully customizable properties"}]}]}]}]},"introduction":"A cursor-aware ripple hover effect","slug":"rippler-button","author":{"framerUserId":"a01d34d2-7688-4859-a664-6498b91fb562","name":"Shakeb Mohammad","slug":"shakeb-mohammad","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132360/0nzT97YU--sxpkzCHCB9TU1X4nqzKfYIDLFynvUH","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a01d34d2-7688-4859-a664-6498b91fb562/019fdcef-18ba-734a-a44b-9da0b85ffeb2.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-07T15:57:24.085Z","updatedAt":"2026-08-08T17:12:27.955Z","publishedAt":"2026-08-07T15:57:24.078Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/MouseFillButton-mQswUd.js@l1KBXQKar5YxLbiaFQFq","previewUrl":"https://rippler.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"l1KBXQKar5YxLbiaFQFq","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-07T15:57:24.522Z","updatedAt":"2026-08-07T15:57:24.522Z"},{"id":"019cdf2d-1ac5-76ad-9601-4a248a107c21","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"a01d34d2-7688-4859-a664-6498b91fb562","name":"Shakeb Mohammad","slug":"shakeb-mohammad","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132360/0nzT97YU--sxpkzCHCB9TU1X4nqzKfYIDLFynvUH","followed":false,"followsYou":false},"media":[],"resources":[{"id":"uwDyrD7AfJVmJmHccylU","resolved":true,"title":"Polaroid Drag","body":"

Features

Physics-based drag interaction
Two aspect ratios: Square and Mini
Fully customizable inside Framer

Customization Options

From the properties panel, you can:

Replace the image
Change background color
Edit caption text
Adjust tilt angle
Resize the component
Switch between Square and Mini variants

Perfect For

Portfolio highlights
Photography sites
Memory or scrapbook sections
Playful landing pages
Personal brand websites

What’s Included

Polaroid Drag component
Square variant
Mini variant
Physics-based interaction built in

","bodyJson":null,"introduction":"A physics-based draggable polaroid.","slug":"polaroid-drag","author":{"framerUserId":"a01d34d2-7688-4859-a664-6498b91fb562","name":"Shakeb Mohammad","slug":"shakeb-mohammad","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132360/0nzT97YU--sxpkzCHCB9TU1X4nqzKfYIDLFynvUH","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/uwDyrD7AfJVmJmHccylU/polaroid-drag-paO2YEMZA9U06e6d3uGSnLwAmXji7y","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-03T06:09:42.866Z","updatedAt":"2026-03-11T12:18:57.520Z","publishedAt":"2026-03-11T23:13:21.093Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://polaroiddrag.framer.website/","price":"3","paymentUrl":"https://shakeb.lemonsqueezy.com/checkout/buy/fb2f5b5f-4120-49d4-ad2a-172ce6d92800","workshop":true,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"JI8uvAjau7WunrKPsrBg","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-03-11T23:13:21.093Z","updatedAt":"2026-03-11T23:13:21.093Z"},{"id":"019c6221-3184-7c48-ab8d-1841ca1d3090","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"a01d34d2-7688-4859-a664-6498b91fb562","name":"Shakeb Mohammad","slug":"shakeb-mohammad","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132360/0nzT97YU--sxpkzCHCB9TU1X4nqzKfYIDLFynvUH","followed":false,"followsYou":false},"media":[],"resources":[{"id":"H2Yz2j1H5EC2Jw9t5RLF","resolved":true,"title":"CardSwap","body":"$52","bodyJson":null,"introduction":"Category cards with smooth image swaps","slug":"cardswap","author":{"framerUserId":"a01d34d2-7688-4859-a664-6498b91fb562","name":"Shakeb Mohammad","slug":"shakeb-mohammad","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132360/0nzT97YU--sxpkzCHCB9TU1X4nqzKfYIDLFynvUH","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/H2Yz2j1H5EC2Jw9t5RLF/cardswap-JzxA1fTQxXaIPejEoWOxCTY9T0loRm","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-08T14:11:42.818Z","updatedAt":"2026-02-16T04:55:23.498Z","publishedAt":"2026-02-15T16:27:48.484Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://cardswap.framer.website/","price":"5","paymentUrl":"https://shakeb.lemonsqueezy.com/checkout/buy/ef7714cb-b368-45f1-81e0-127d613d06f5","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"foXbOmWriPhRNYNDwgnT","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-15T16:27:48.484Z","updatedAt":"2026-02-15T16:27:48.484Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L53"}]