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:Te2d,

Animated 3D Grid Pattern

Transform your website projects with this highly customizable, animated retro-style grid component. This component is Perfect for creating modern hero sections backgrounds, retro-style websites, or subtle animated textures

Features

Three Grid Styles: Choose between Standard square grid, Diamond pattern, or Diagonal lines
Smooth 3D Animation: Infinite scrolling grid with adjustable speed and direction
Adjustable 3D Perspective: Control depth and viewing angle from 0° to 90° for dramatic effects
Customizable Fade Gradient: Seamlessly blend the grid into your background with adjustable fade height
Fully Customizable: Control every aspect from colors to perspective angle
Multi-Directional Animation: Choose horizontal, vertical, or diagonal movement patterns
Flexible Cell Size: Customize grid cell from 10px by 10px to 200px by 200px spacing.
Variable Opacity Control: Fine-tune visibility from subtle (0.1) to bold (1.0) in 0.05 increments

How to Use

Add to Canvas: Drag the Grid component onto your Framer canvas
Position & Size: Resize the component to fit your design
Customize: Use the properties panel to adjust settings to match your aesthetic
Layer it: Place content on top of the grid for stunning visual depth

Customization Properties

Visual Style

Grid Cell Size (10-200px): Adjust spacing between grid lines
Line Color: Change the grid line color
Background Color: Set the base background
Opacity (0-1): Control grid visibility

3D Effect

Perspective Angle (0-90°): Tilt the grid (65° recommended for classic look)
3D Perspective (50-1000px): Adjust depth perception

Fade Effect

Fade Height (0-100%): Control how much of the bottom fades out
Fade Color: Match your page background for seamless blending

Grid Types

Standard: Classic square grid with interactive cells
Diamond: Rotated squares for geometric pattern
Diagonal: 45° angled lines for dynamic effect

Animation Settings

Direction Controls

Horizontal: Grid moves left to right
Vertical: Grid moves top to bottom
Both: Diagonal movement (most dynamic)

Speed Adjustment

Range: 0.5s - 5s per cycle
Lower = faster, Higher = slower

Best Use Cases

Landing page hero sections
Product showcase backgrounds
Portfolio headers
Presentation slides

52:T1120,

Avatar Group Animations

The Editable Avatar Group Animations is an advanced, highly customizable avatar group component designed to display multiple user avatars in an elegant overlapping layout with smooth animations and interactive tooltips that pop.

How to Use

Basic Setup

Add the Avatar Group component to your Framer canvas
Edit the number of Avatars (supports up to 10 avatars)
Customize the avatars in the component properties panel

Adding Custom Avatars

Image: Upload an image for profile pictures
Fallback Text: Set initials or short text (e.g., "JD", "AB") for when images don't load
Name/Tooltip: Add the person's name that appears on hover

Styling Options

Avatar Appearance

Avatar Size: Adjust from 24px to 120px
Overlap: Control how much avatars overlap (0-40px)
Border Width: Set border thickness (0-8px)
Border Color: Choose border color (great for brand consistency)

Typography

Font Controls: Full typography control, including font family, weight, size, and spacing

Animation Settings

Hover Effects

Scale: Simple scale up on hover
Lift: Combines upward movement with scaling
Rotate: Adds subtle rotation with scaling
Up: Pure vertical lift without scaling

Timing Controls

Hover Scale: How much to scale on hover (1.0-1.5x)
Animation Duration: Overall animation timing (0.1-2s)
Bounce Damping: Controls the bounciness of spring animations (lower values = more bounce)

Use Cases for This Component Include:

Team Pages: Showcase project members with their names revealed on hover.
Messaging Apps: Display participants in a conversation.
Social Apps: Show friend groups, followers, or connections.
Project Collaboration: Indicate team members working on specific projects, tasks, or shared documents.
Social Proof Element: Display customer testimonials, user reviews, or satisfied clients to build trust and credibility.

4f:["$","$L50",null,{"value":{"fallback":{"$inf$activity-creator-8f32da37-7ae3-4ab5-9077-ad58e83754a6-all:/unified/creator/8f32da37-7ae3-4ab5-9077-ad58e83754a6/activity/":[{"data":[{"id":"019f7093-ed90-76f5-b832-5fb05e1d24a5","type":"creator.followed","target":{"type":"creator","id":"530618d4-39d4-4326-822e-6adc8a89643b","preview":"Renatho","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/530618d4-39d4-4326-822e-6adc8a89643b/1mfjjuaw","slug":"renatho","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"8f32da37-7ae3-4ab5-9077-ad58e83754a6","name":"Kehinde Clement","avatar":"https://framerusercontent.com/avatars/users/8f32da37-7ae3-4ab5-9077-ad58e83754a6/eu4YVhXm3","slug":"kehinde-clement","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-17T14:56:10.633Z","latestAt":"2026-07-17T14:56:10.633Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:8f32da37-7ae3-4ab5-9077-ad58e83754a6:/unified/posts/?creator=8f32da37-7ae3-4ab5-9077-ad58e83754a6&with=reposts":[{"data":[{"id":"0199bdde-7b69-7193-9bb8-6e47a714f124","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"8f32da37-7ae3-4ab5-9077-ad58e83754a6","name":"Kehinde Clement","slug":"kehinde-clement","avatar":"https://framerusercontent.com/avatars/users/8f32da37-7ae3-4ab5-9077-ad58e83754a6/eu4YVhXm3","badges":["expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"F8kH4lcDWgMN0BdS1sDl","resolved":true,"title":"Grid Pattern 3d","body":"$51","bodyJson":null,"introduction":"","slug":"grid-pattern-3d","author":{"framerUserId":"8f32da37-7ae3-4ab5-9077-ad58e83754a6","name":"Kehinde Clement","slug":"kehinde-clement","avatar":"https://framerusercontent.com/avatars/users/8f32da37-7ae3-4ab5-9077-ad58e83754a6/eu4YVhXm3","badges":["expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/F8kH4lcDWgMN0BdS1sDl/grid-pattern-3d-2DEEwiRCMJXMVWEzmsezKMB4l5HQOI","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-01T12:32:03.245Z","updatedAt":"2026-01-13T10:27:45.815Z","publishedAt":"2025-10-07T08:51:38.473Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/RetroGrid-DmwM.js@mAwQYwG5SJsvoOGFSYcV","previewUrl":"https://animatedgridpattern.framer.website/","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"mAwQYwG5SJsvoOGFSYcV","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":27,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-07T08:51:38.473Z","updatedAt":"2025-10-07T08:51:38.473Z"},{"id":"0199787f-a5b6-70da-858c-f22fc1b494d0","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"8f32da37-7ae3-4ab5-9077-ad58e83754a6","name":"Kehinde Clement","slug":"kehinde-clement","avatar":"https://framerusercontent.com/avatars/users/8f32da37-7ae3-4ab5-9077-ad58e83754a6/eu4YVhXm3","badges":["expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"ljv5cLjeDlaPLlwRyodC","resolved":true,"title":"Avatar Animations","body":"$52","bodyJson":null,"introduction":"","slug":"avatar-animations","author":{"framerUserId":"8f32da37-7ae3-4ab5-9077-ad58e83754a6","name":"Kehinde Clement","slug":"kehinde-clement","avatar":"https://framerusercontent.com/avatars/users/8f32da37-7ae3-4ab5-9077-ad58e83754a6/eu4YVhXm3","badges":["expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/ljv5cLjeDlaPLlwRyodC/avatar-animations-K6W71Ey9C4eWSMwu9y2X4LeKkpZpSh","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-08-27T09:12:45.991Z","updatedAt":"2025-09-23T21:33:16.253Z","publishedAt":"2025-09-23T21:34:15.478Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/AvatarGroupEditable-1-j5wT.js@fDPIj5tp7EoQ5FrmI7KK","previewUrl":"https://animatedavatars.framer.website/","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"fDPIj5tp7EoQ5FrmI7KK","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":26,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-09-23T21:34:15.478Z","updatedAt":"2025-09-23T21:34:15.478Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L53"}]