65:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/40ipl9wdtrm_x.js","/creators-assets/_next/static/immutable/chunks/1bd061yvfby7i.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1amcd-eostlux.js","/creators-assets/_next/static/immutable/chunks/06b9gh03a5itu.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3xzkckc77quth.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/25aeqr2ydtz4o.js","/creators-assets/_next/static/immutable/chunks/2hfz7h1vpjv9v.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/41glpbsahf_22.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/31t_i-sjkqwxc.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/31wecb1pe5ugs.js","/creators-assets/_next/static/immutable/chunks/2bej0vd4kut9m.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0mf-dfabvof5m.js","/creators-assets/_next/static/immutable/chunks/28zsl3gu7sgg3.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/31uxrh745m-yq.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1hrrs8zq4ee_v.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/0kwdy8yc-c0ba.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js"],"S"] 66:Tb76,

The Staggered Wipe is a high-performance entrance transition component for Framer that creates a "reveal" effect by deconstructing the screen into a grid of animated tiles. Unlike standard fade-ins, this component uses mathematical staggering to move elements off-screen in a choreographed sequence, giving the appearance of a physical curtain being drawn or a digital wall shattering.

Core Mechanics: How it Works

The component works by overlaying a fixed, full-screen grid on top of your page content. This grid is then cleared based on the following logic:

The Grid System: It dynamically calculates a matrix of rows and columns. Each tile in the grid is an individual motion.div that knows its place in the sequence.
Rank-Based Staggering: The component uses a getGridRanks function to assign a "priority number" to each tile.
- Left/Right: Tiles exit in a linear wave.
- Center: Tiles expand outward from the middle like a ripple.
Smart Cleanup: It includes a done state. Once the very last tile (the maxRank) finishes its animation, the entire component unmounts from the DOM. This ensures your site remains interactive and doesn't waste browser resources.

Key Customization Features

The code you've written provides a massive amount of flexibility for the end user:

1. Visual Fill Modes

Users can choose how the "curtain" looks before it vanishes:

Color Gradient: Uses lerpColor to create a smooth transition between colorStart and colorEnd across the width of the grid.
Image Slicing: This is the most impressive mode. It takes a single image and "slices" it across the tiles using backgroundPosition math. When the grid moves, the image appears to break apart.
Image + Color: Overlays a tinted color on top of an image for a more branded, subtle look.

2. Animation Behaviors

The component supports three distinct exit "vibes":

Slide: Tiles maintain their size and move out of the viewport.
Scale: Tiles shrink slightly while moving, creating a "zoom-out" depth effect.
Fade: Tiles simply dissolve in place (best for subtle reveals).

3. Physics & Timing

Easing Presets: Includes "Snappy" for high-tech sites, "Bouncy" for playful brands, and "Smooth" for luxury experiences.
Stagger Delay: Controls the "tightness" of the wave. A low delay makes it look like a solid block; a high delay makes it look like individual falling debris.

67:T704,

I built Ensemble to solve the "placeholder hunt." Instead of spending twenty minutes digging through stock sites to find ten decent headshots for a team grid, Ensemble lets you do it in one click—directly inside Framer.

Instant Performance, Zero Waiting

Most avatar tools rely on external APIs that can be slow or return broken links. Ensemble is different. Every face is bundled directly into the plugin as an optimized WebP file. This means there is zero loading time; your design updates the millisecond you click the button.

Design with a Safety Net

Experimenting with different looks shouldn't be risky. Before every injection, Ensemble takes a "snapshot" of your current styles. If you don’t like the random mix it generated, just hit Restore to jump back to your original design instantly.

Free vs. Ensemble Pro

The free version is a fully functional way to speed up your workflow with a curated set of initial faces. Upgrading to Pro unlocks the full library of 100+ unique, diverse identities—essential for large-scale directories or social feed mockups where you want to avoid the "clone effect" of repeating faces.

Key Features:

Instant Injection: Zero-latency WebP assets bundled into the plugin.
Batch Filling: Select multiple frames and fill them all at once.
Snapshot & Restore: One-click "Undo" for all plugin actions.
Privacy First: No tracking, no external data calls, and offline-friendly.

Ensemble is a one-time purchase tied to your Framer account. Buy it once, use it across every project you ever build.

64:["$","$L65",null,{"value":{"fallback":{"$inf$activity-creator-adc38ef4-22f8-467b-894b-b09da3fa98d8-all:/unified/creator/adc38ef4-22f8-467b-894b-b09da3fa98d8/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:adc38ef4-22f8-467b-894b-b09da3fa98d8:/unified/posts/?creator=adc38ef4-22f8-467b-894b-b09da3fa98d8&with=reposts":[{"data":[{"id":"019e18d3-eddc-7f6b-9b49-b2766e114a34","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"adc38ef4-22f8-467b-894b-b09da3fa98d8","name":"Aman Jandu","slug":"aman-jandu","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"0pOeRvDFClkHbgk5p1d1","resolved":true,"title":"StaggeredWipe","body":"$66","bodyJson":null,"introduction":"A grid-based, cinematic reveal engine","slug":"staggeredwipe","author":{"framerUserId":"adc38ef4-22f8-467b-894b-b09da3fa98d8","name":"Aman Jandu","slug":"aman-jandu","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/0pOeRvDFClkHbgk5p1d1/staggeredwipe-SaOowqH7NVpPsWb7GlotAnHWAg3M2U","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-21T10:44:52.219Z","updatedAt":"2026-05-11T16:11:05.524Z","publishedAt":"2026-05-11T20:56:42.716Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://miracle-insurance-604854.framer.app/","price":"12","paymentUrl":"https://jarogge.lemonsqueezy.com/checkout/buy/a0e84dbb-1125-4920-856e-52e336113c0b","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"LV4jUWporwgo6EC6D6cN","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-11T20:56:42.716Z","updatedAt":"2026-05-11T20:56:42.716Z"},{"id":"019db067-bbed-79f1-87c1-6a9ecb61978f","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"adc38ef4-22f8-467b-894b-b09da3fa98d8","name":"Aman Jandu","slug":"aman-jandu","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"1051","resolved":true,"title":"Ensemble","body":"$67","bodyJson":null,"introduction":"Ensemble","slug":"ensemble","author":{"framerUserId":"adc38ef4-22f8-467b-894b-b09da3fa98d8","name":"Aman Jandu","slug":"aman-jandu","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/1051-LjcIthnSThnykXOAybX4vfss37PCRw","metadata":{"tint":{"h":180,"s":50,"l":6},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/1051-Ho9KJ2qsrBwrJ3DraXXQoDNKsO2lP2","metadata":{"tint":{"h":180,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-20T10:34:55.827Z","updatedAt":"2026-04-21T22:17:20.722Z","publishedAt":"2026-04-21T14:18:01.581Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"2jlxr244wto9hfruzqncub1ex","paid":true,"categories":[{"id":"3fc802d9-7527-48e0-9403-c9bd534ab520","name":"Utilities","slug":"utilities"}],"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-04-21T14:18:01.581Z","updatedAt":"2026-04-21T14:18:01.581Z"},{"id":"019d08ee-9660-7193-ad50-a20ce8818168","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"adc38ef4-22f8-467b-894b-b09da3fa98d8","name":"Aman Jandu","slug":"aman-jandu","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"911","resolved":true,"title":"Image Optimizer Pro","body":"

Image Optimizer is the ultimate AI image workflow for web designers and agencies.

Stop leaving the canvas to compress images and write SEO tags. Image Optimizer selects any image on your Framer canvas, physically compresses it to a next-gen WebP format, and uses Meta's Llama AI to analyze the image and inject highly descriptive Alt-Text straight into your accessibility settings.

• 1-Click WebP Compression

• AI Context Personas (SEO, E-Commerce, Accessibility)

• Auto-renames canvas layers for clean file structures

• 5 Free trials included. Unlimited use requires a Pro License.

","bodyJson":null,"introduction":"Image Optimizer","slug":"image-optimizer-pro","author":{"framerUserId":"adc38ef4-22f8-467b-894b-b09da3fa98d8","name":"Aman Jandu","slug":"aman-jandu","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/911-SO0xX7OH8T24E80QglCrndqIFsSwzX","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/911-L18p2v317AXMMbiVziOW0X4NqMFQSK","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-18T02:23:55.913Z","updatedAt":"2026-03-20T01:46:17.052Z","publishedAt":"2026-03-20T01:49:07.040Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"bdyd9dw8a87dfct9mog51rdv6","paid":true,"categories":[{"id":"676f63da-b192-4974-930d-73185802088a","name":"Media","slug":"media"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-03-20T01:49:07.040Z","updatedAt":"2026-03-20T01:49:07.040Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L68"}]