51: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"] 52:T840,

### The Ultimate Image Slicer

Geometric Scatter is a premium, highly-interactive image component that breaks your visuals apart and brings them to life. By utilizing an advanced SVG engine, the component slices any image you provide into customizable, geometric pieces that playfully scatter when hovered.

### 10 Stunning Patterns

Choose from 10 distinct, mathematically generated cut patterns to perfectly match your site's aesthetic:

- Grid, Rows & Columns: Clean, classic rectangular slices.

- Triangles & Cross Cuts: Sharp, modern diagonal slices.

- Diamonds & Chevrons: Dynamic, directional arrow-like shapes.

- Concentric & Sunburst: Beautiful radial slices expanding from the center.

### Unmatched Customization

Unlike standard CSS `clip-path` solutions, Geometric Scatter is built entirely on inline SVGs, meaning it natively supports borders on every single complex geometric piece.

- Complexity: Increase the grid size to create dozens of tiny shards, or keep it simple with a few large pieces.

- Border Control: Add sleek borders to your slices with full width and color controls.

- Animation Tuning: Tweak the scatter distance, spring speed, and entry delay to dial in the perfect physics.

### Performant & Production Ready

- Reactive Cursor Physics: The pieces intelligently calculate their distance from your cursor, naturally scattering out of the way as you brush your mouse over them.

- Mobile Safe: Includes a dedicated "Disable Mobile" toggle to ensure the interaction gracefully degrades to a static image on touch devices.

- SEO & Editor Friendly: Uses hidden semantic `<img>` tags for perfect SEO, and utilizes Framer's `useIsStaticRenderer` to ensure it never disrupts your canvas editing experience.

53:T7d4,

### Key Features

* Dynamic Scatter Animation: As you scroll down your page, the image squares fly in from the sides and below, seamlessly snapping together into a perfect grid using smooth spring physics.

* Magnetic Hover Effects: Hovering over the grid brings it to life. The highlighted section gently pops out, while the neighboring squares physically push away and glaze over with a beautiful frosted glass effect.

* Smart Hover Brush: The component automatically adapts to your grid complexity. Small grids highlight individual squares, while massive grids dynamically highlight entire clusters, ensuring the interaction always feels perfect.

* SEO & Performance Optimized: Under the hood, your image remains 100% crawlable by search engines (via visually hidden tags) and implements an advanced static fallback for the Framer canvas and Server-Side Rendering (SSR), ensuring your site stays blazing fast.

### Customization Options

* Image: Upload any image or pull directly from your CMS.

* Grid Size (2-20): Choose anything from a subtle 4-piece split to a complex 400-piece mosaic.

* Gap & Spacing: Dial in exactly how much space you want between the slices.

* Borders: Add and style borders around the grid cells with custom width, color, and border radius.

* Independent Animations: Full control to independently disable the initial appear scatter animation or the hover interaction.

* Image Fit: Switch between Cover, Contain, or Fill depending on your layout constraints.

* Entry Delay: Control exactly how long the component waits to assemble once it scrolls into view, perfect for staggering multiple animations on a page.

54:T6f3,

Elevate your Framer site with a completely custom, highly-performant photo gallery component. The Striped Carousel replaces basic sliding animations with a sophisticated "falling curtain" transition that adds a premium, dynamic feel to your portfolio or landing page.

### Key Features

- Dynamic Transition: Images are sliced into perfectly aligned vertical stripes that fall away in a staggered sequence depending on navigation direction.

- Hardware Accelerated: Built with advanced CSS `transform` and `borderRadius` mathematics to ensure subpixel perfection and flawless 120fps rendering, avoiding the lag of heavy `clip-path` calculations.

- Responsive Layout: Works beautifully at any aspect ratio, with images automatically scaling via native `cover` logic.

- Fast Navigation Support: Click through images as fast as you want—in-progress animations will seamlessly snap to completion to keep up with the user.

### Customization Options

Available directly in the Framer Property Panel:

- Images: Add as many photos as you want via standard Framer image arrays.

- Stripes: Control the exact number of slices (up to 20 for optimal performance).

- Animation: Fine-tune the fall distance, total duration, and stagger gap.

- Aesthetics: Configure border radius, width, color, and style.

- Arrows: Fully style the navigation arrows (Size, Background, Color).

- Overflow: Toggle whether the falling stripes are hidden by the component bounds or visibly fall outside of them.

55:T567,

A highly interactive, physics-inspired sticky scroll component for Framer. As users scroll down your page, the topmost card elegantly bends and peels off from the top-right corner—revealing the next card in the deck. It's built entirely natively with `framer-motion` and CSS clip-paths for buttery smooth, 60fps performance without taking over the native browser scroll.

Features & Customization:

- Dynamic Content: Accept arbitrary Framer components (using native Slots) or quickly upload an array of images.

- Tactile Peel Effect: Features a folding sticker flap that mirrors the cut path perfectly, complete with dynamic drop shadows that cast realistic depth onto the underlying cards.

- Customizable Flap: Adjust the back color of the peeling sticker. Supports solid colors or rich Framer gradients.

- Responsive Sizing: Configure exact Card Width and Height controls, with horizontal overflow protection to ensure a perfect fit on mobile devices.

- Alignment: Control the alignment (X and Y) of the card deck within the viewport.

- Accessibility: Includes a robust "Disable Animation" toggle, allowing the component to fall back to a static layout for accessibility and performance.

56:T901,

Upgrade your website’s media experience with the Minimal Video Player, a custom-built HTML5 video component designed natively for Framer. Gone are the days of rigid, unstyleable default browser players. This component introduces a soft, neumorphic aesthetic with buttery-smooth micro-interactions, while fully supporting the native capabilities you expect from Framer's default video component.

Key Features:

- Native Framer Power: Supports URL or direct file uploads, autoplay, looping, muting, object-fit settings, and custom poster images—just like Framer's native player.

- Neumorphic Design: Soft, transitioning shadows give the player a tactile, physical feel.

- Morphing Play Controls: A custom SVG play/pause button that smoothly animates and depresses when activated.

- Interactive Timeline: A fully custom progress bar that supports smooth click-and-drag scrubbing to easily seek through your videos.

Customization Options:

- Colors & Styles: Full control over the player background, icon colors, and video background.

- Progress Bar: Choose between a solid color or a customizable two-color gradient for the timeline fill.

- Shadows: Customize both the light and dark shadow colors (with RGBA support) to perfectly match your site's background, whether it's light, dark, or tinted.

- Border Radii: Independently adjust the corner roundness of the outer container, the inner video, and even the play/pause button.

- Start Time: Set a specific percentage for the video to begin playing from.

- Disable Animations: A built-in toggle to disable the morphing icons and shadow transitions for accessibility or performance preferences.

Performance & Accessibility:

- Highly optimized using Framer's `useIsStaticRenderer` to ensure zero performance overhead while editing on the canvas.

- Smooth `requestAnimationFrame` loop for progress updates, which automatically cleans up when paused.

- Fully semantic HTML5 video tag usage.

57:T649,

A sleek, minimal toggle switch with a soft futuristic aesthetic — perfect for settings panels, dashboards, or any interface that calls for a polished On/Off interaction.

The component comes in two variants: On and Off. In its active state, the knob glows in a cool aqua tone with a subtle outer radiance, while the off state settles into a calm neutral grey — both sitting inside a softly inset track with a gentle neumorphic shadow that gives it a satisfying physical feel.

What you can customize:

Variant — Switch between the On and Off states directly from the component settings
Show Text — Toggle the "On" / "Off" label inside the knob on or off
Knob Color — Independently set the knob color for both the On (#92DFE8) and Off (#9E9B9B) states
Track Color — Control the fill of the track for each state (#E1FAFC for On, #D6D6D6 for Off)
Track Outer Border Color — Customize the outer border of the track (defaults to white #FFFFFF for both states)
Track Inner Border — Solid border style on the track, configurable per state
Knob Border — Solid border style on the knob, configurable per state

All color and border properties are independently controlled for On and Off states, giving you full flexibility to match your own design system without touching a single line of code.

58:T6be,

Bring your typography to life with Grid Text Reveal, a highly customizable, physics-driven Framer component. It slices any text into an interactive grid of squares that dynamically scatter and reassemble as users scroll down your page.

Key Features:

Physics-Based Animation: Utilizing Framer Motion, the text squares organically float into their proper alignments with buttery-smooth spring physics and sequential staggering.
Flawless Gradients & Borders: Fully style the scattered square pieces with solid colors, gorgeous gradients, and adjustable borders without ever corrupting or squishing your typography layout.
Perfect SEO & Accessibility: Unlike canvas-based text effects, this component leaves a perfectly structured, selectable, and screen-reader-friendly text element in the DOM once the animation finishes.
Breakpoint Ready: Includes a built-in disable toggle so you can easily turn off the effect for mobile visitors while keeping it active on desktop.

Customization Options:

Full native Font, Size, and Color controls
Grid Density (Rows & Columns)
Scatter Distance (X & Y Axis) and Rotation
Cell Backgrounds (Solid or Gradient with Start/End/Angle)
Border Styling (Width, Radius, Color, Style)
Detailed Timing Controls (Speed, Delay, Stagger Gaps)
"Keep Cells Visible" option for permanent aesthetic borders
Canvas Preview Modes for effortless static styling

59:T8ea,

Elevate your site's typography with a mesmerizing, physics-inspired liquid filling effect. Liquid Text Reveal acts as a drop-in text component that seamlessly fills your words like a glass of water when they scroll into view. Built specifically for Framer, it flawlessly handles complex descenders, perfectly supports custom Web Fonts, and features fully independent horizontal wave mechanics for a continuous, smooth flow.

### 🔥 Key Features

* Continuous Fluid Motion: The wave never stops rippling. It utilizes Framer Motion's imperative animation loops for butter-smooth horizontal flow, independently decoupled from the vertical fill.

* Gradients & Solids: Fill your text with a simple solid color, or unlock stunning visuals using fully configurable CSS gradients.

* Flawless Clipping & Alignment: Engineered to bypass notorious browser text-clipping bugs. Safe for ascenders and descenders (like the letters "p", "q", and "g") so your fluid never randomly gets chopped off.

* Static Mode Support: Want a static, half-filled text look without the animation? Just set the fill percentage and toggle to Static Fill mode.

### 🎛️ Customization Controls

* Typography: Full access to Framer's native Font controls (Size, Variant, Line Height, Letter Spacing, Alignment).

* Fill Style: Toggle between Solid Color or Gradient (with controls for Start/End colors and Angle).

* Wave Physics: Control the Wave Height, Wave Width, Flow Speed, and Flow Direction (Left to Right / Right to Left).

* Target Fill (%): Decide exactly how high the liquid rises (e.g., fill to 100% and disappear, or stop halfway at 50%).

* Styling FX: Built-in toggles for Text Shadows (X, Y, Blur, Color) and Text Borders (Stroke Width, Color).

* Timing: Configure the Fill Duration and Entry Delay for the reveal animation.

* Disable Animation: One-click toggle to disable all movement for accessibility or static mockups.

5a:T8f4,

### A Dramatic Scroll Reveal for Text

Paper Curtains places a row of colored strips over your text that peel away with a satisfying, physics-based animation the moment they scroll into view. It's a simple idea executed with polish—perfect for hero headings, pull quotes, or any text that deserves an entrance.

### 5 Fall Directions × 5 Stagger Patterns

Mix and match to create dozens of unique reveal styles:

- Fall Directions: Down, Up, Split, Alternating, and Scatter Drop—each with its own 3D rotation and physics feel.

- Stagger Patterns: Left to Right, Right to Left, Center Out, Edges In, or Random—control the order the strips peel off.

### Full Visual Customization

Every visual aspect of the curtains is exposed in the Framer property panel:

- Solid or Gradient Fill: Switch between a flat color and a configurable linear gradient with start color, end color, and angle controls.

- Border Styling: Add borders to each strip with independent width, color, and style (solid, dashed, or dotted) controls.

- Corner Radius: Round the corners of each strip from sharp rectangles to soft pills.

- Curtain Count & Oversize: Fine-tune how many strips cover the text and how far they extend beyond the text bounds.

### Full Font Control

Uses Framer's native extended font controls—set the family, weight, size, line height, letter spacing, and alignment directly in the property panel. No CSS overrides needed.

### Designer-Friendly Canvas Tools

- Preview Curtains Toggle: Show curtains at rest on the canvas so you can style colors, gradients, and borders visually—then hide them to check the revealed text layout.

### Performant & Production Ready

- Spring Physics: Powered by Framer Motion springs for smooth, hardware-accelerated animation.

- Scroll-Triggered: Uses `useInView` with a `once` trigger so the animation fires exactly once and the strips are removed from the DOM after they fall.

5b:T77a,

Bring your visuals to life with the Color Reveal Lens! This component takes any standard image and applies a beautiful grayscale filter by default. When visitors move their mouse over the image, a dynamic "lens" follows their cursor, wiping away the black and white filter to reveal the brilliant original colors underneath.

Whether you're building a high-end photography portfolio, an edgy agency website, or just want to add a delightful micro-interaction to your hero section, this component is guaranteed to wow your users.

🎨 Powerful Customization

Edge Styles: Choose between razor-sharp geometric clipping paths or a beautifully feathered, soft-edged mask.
Dynamic Shapes: When using sharp edges, choose between Circle, Square, or Triangle lenses.
Luminosity Control: Fine-tune the brightness of your grayscale background to create intense, high-contrast reveals.
Buttery Smooth Physics: The lens doesn't just rigidly stick to the cursor—it glides. Powered by Framer Motion springs, you can easily adjust the "Smoothing" to add satisfying weight and drag to the effect.

⚡ Built for Performance & SEO

Hardware Accelerated: Uses native CSS clip-path and mask-image properties combined with absolute positioning to ensure smooth 60fps animations without layout thrashing.
SEO & Accessibility Friendly: Includes visually hidden image tags so search engine crawlers and screen readers can still fully index and understand your images.
Designer Friendly: Utilizes Framer's useIsStaticRenderer hook to ensure the component looks perfect while editing on the canvas, without distracting infinite animation loops.

5c:T895,

Overview

A sleek, modern button with a soft neumorphic feel and a glowing cyan gradient border that makes it stand out without being aggressive. Perfect for hero sections, contact CTAs, or anywhere you want a polished, high-tech aesthetic that feels premium yet minimal.

What's Included

This component comes in two functional behaviors, split across three variants:

The Auto-Switching Button (Base & Temporary Highlight) — Both of these variants automatically animate the button between its resting and highlighted states — this includes both the text color cycling between the base and temporary highlight color, and the gradient border animating alongside it. The only difference between them is the starting state — Base begins in the gray resting color, while Temporary Highlight begins already in the highlighted state. Pick whichever starting state fits your layout best.

Fixed Version — A calmer alternative that disables all automatic animation entirely. The text stays permanently in the base color, the gradient border stays static, and the only interaction that occurs is on hover. Use this when you want a refined, understated button that doesn't draw unsolicited attention.

Settings

Property Description Text The button label. Defaults to "Contact Us" — change it to anything. Text Base Color The resting text color (default #80878A, soft slate gray). Also the permanent color in the Fixed Version. Text Hover Color The color the text shifts to when hovered (default #82BDCF, bright cyan). Temporary Highlight Text Color The color the text cycles to during the automatic animation in the Base and Temporary Highlight variants (default #82BDCF). Can be set independently from the hover color. Link Optional URL the button navigates to on click. New Tab Toggle whether the link opens in a new browser tab. Smooth Scroll Enable smooth scrolling when linking to an anchor on the same page.

5d:T428,

A fully customizable Elegant CTA Button built for Framer. Features a dark metallic base state and a brushed steel hover — but it's not limited to that. Customize the text, text color, font size, icon color, icon container border, radius, padding, gap between icon and text, outer border, inner padding, and both base and hover shadow layers to match any brand. The layered shadow system (4 shadows per state) creates realistic depth — just update the warm-hued shadows to match your accent color when changing the main color. Ideal for booking flows, agency heroes, or any premium CTA.

Settings of the component:

Also totally fine to unlink and customize further if preferring using it as a base.

5e:T947,

Elevate your website's social proof with this fully customizable testimonial card — designed to look stunning out of the box while giving you complete control over every detail.

Choose from three layout variants: a split 2/3 wide picture layout, a full-width picture layout, or a compact version — perfect for any section width or use case. Drop in your customer's photo, name, and review text, then toggle the star rating on or off depending on your needs.

The rating system supports 0.5 increments from 0 to 5 stars (think 4.5, 3.5, 2.5 and so on) in both Big and Medium sizes, giving you precise control over how feedback is displayed. Every visual layer is independently adjustable: tweak the back frame color, border, radius, shadows, and content gap to match your brand perfectly. The front frame comes with its own shadow and radius settings, while the floating quote icon has its own container color, border, radius, shadow controls — and yes, the quote mark color itself is independently customizable too.

Additional properties let you fine-tune the testimonial text color, stars color, and front frame blur intensity — so whether you're going for glassmorphism, soft minimalism, or bold contrast, this card adapts effortlessly. (unlink the component to customize the font and other properties that can't be surfaced in Framer component properties and need a local style to be customizable from the outside).

Built for Framer with clean component properties to minimize extra setup needed and let you comfortably experiment from the component settings. Just drag, drop, and customize.

Link to the preview: https://dandy-version-098885.framer.app/preview

Settings of the component:

Also totally fine to unlink and customize further if preferring using it as a base.

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-ff3d8eca-ae13-4845-bd7e-9c26d1085c71-all:/unified/creator/ff3d8eca-ae13-4845-bd7e-9c26d1085c71/activity/":[{"data":[{"id":"019ee0bb-e76d-73ee-a004-09f0a6f1e204","type":"creator.followed","target":{"type":"creator","id":"04759e4d-dbf8-4d5e-90a4-194c33b38139","preview":"Frame Craft","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1594489/avatar-Yk5sJESXs5C3PTOZriasfPNuecSzIy.jpg","slug":"frame-craft","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","avatar":null,"slug":"jirei","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T16:34:31.401Z","latestAt":"2026-06-19T16:34:31.401Z"},{"id":"019ee0bb-e4f0-73aa-8246-44bcfe82fd4a","type":"creator.followed","target":{"type":"creator","id":"10babd35-5d65-432b-a937-0d364862def7","preview":"Template Munk","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/987138/avatar-ab5H26kGpYaOYuIhN5LyueDxmZncxB.jpg","slug":"template-munk","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","avatar":null,"slug":"jirei","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T16:34:30.764Z","latestAt":"2026-06-19T16:34:30.764Z"},{"id":"019ee0bb-e25b-7153-936d-825e8bc6666c","type":"creator.followed","target":{"type":"creator","id":"15cdea37-2b96-4698-8f3c-568d4a08e5f3","preview":"Sanvy Islam","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/39589/avatar-3jHrum3oCOoPNGbP0fjcwHD2NabFQ3.jpg","slug":"sanvy-islam","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","avatar":null,"slug":"jirei","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T16:34:30.102Z","latestAt":"2026-06-19T16:34:30.102Z"},{"id":"019ee0bb-dd53-77b1-9051-b4abd66af003","type":"creator.followed","target":{"type":"creator","id":"2b33eac4-4422-4c15-ba75-80a068fa9086","preview":"Denis Turbin","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2b33eac4-4422-4c15-ba75-80a068fa9086/gogz3777","slug":"denis-turbin","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","avatar":null,"slug":"jirei","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T16:34:28.815Z","latestAt":"2026-06-19T16:34:28.815Z"},{"id":"019ee0bb-d6aa-7139-a572-9b9e9175db85","type":"creator.followed","target":{"type":"creator","id":"4164956a-7177-4789-b8ea-5567983998f4","preview":"Domenico Griffo","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/4164956a-7177-4789-b8ea-5567983998f4/oft9a3s0","slug":"domegriffo","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","avatar":null,"slug":"jirei","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T16:34:27.109Z","latestAt":"2026-06-19T16:34:27.109Z"},{"id":"019ee0bb-d3e8-74aa-bfc8-ef18d2365a63","type":"creator.followed","target":{"type":"creator","id":"38425120-6213-4b66-8b3c-e3e66d07ec64","preview":"Interface Studio","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2199676/kD3QNNYGg-bGneREuqMDI2n3QFCDqegiFFxRtaNA","slug":"interfacestudio","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","avatar":null,"slug":"jirei","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T16:34:26.405Z","latestAt":"2026-06-19T16:34:26.405Z"},{"id":"019ee0bb-ca1c-7229-98fb-d0e9a3107330","type":"creator.followed","target":{"type":"creator","id":"4fd602dd-21dc-47b5-9483-316c27f1b7d5","preview":"Mohd Mehraj","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/970888/avatar-frbPv0G2rCV8RjV9TdwpYmh7dYwKm2.jpg","slug":"mehraj","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","avatar":null,"slug":"jirei","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T16:34:23.897Z","latestAt":"2026-06-19T16:34:23.897Z"},{"id":"019ee0bb-c438-7759-b2eb-770287eb6655","type":"creator.followed","target":{"type":"creator","id":"6bff670a-c602-4aa1-ae47-cc408f8f0a34","preview":"Sarbojit","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/6bff670a-c602-4aa1-ae47-cc408f8f0a34/zjkg2266","slug":"sarbojit","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","avatar":null,"slug":"jirei","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T16:34:22.383Z","latestAt":"2026-06-19T16:34:22.383Z"},{"id":"019ee0bb-bb24-75f6-871b-f802248d2854","type":"creator.followed","target":{"type":"creator","id":"8f3ab624-224a-405f-bb7c-44c2296eecab","preview":"Basecom","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8f3ab624-224a-405f-bb7c-44c2296eecab/mb9o19ft","slug":"basecom","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","avatar":null,"slug":"jirei","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T16:34:20.063Z","latestAt":"2026-06-19T16:34:20.063Z"},{"id":"019ee0bb-b2e1-70f8-8286-97d7048d75a6","type":"creator.followed","target":{"type":"creator","id":"a50edc6a-58f1-4842-b079-ce0a36756a84","preview":"fahim iqbal","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a50edc6a-58f1-4842-b079-ce0a36756a84/dxffp5s5","slug":"fahim-iqbal","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","avatar":null,"slug":"jirei","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T16:34:17.949Z","latestAt":"2026-06-19T16:34:17.949Z"},{"id":"019ee0bb-ae61-75d0-b3a6-37e840d26488","type":"creator.followed","target":{"type":"creator","id":"afeb2e2c-1de5-4401-86fe-2b08027ba9a4","preview":"Veeru Kumar","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/afeb2e2c-1de5-4401-86fe-2b08027ba9a4/ho1e20uq","slug":"veeru-kumar","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","avatar":null,"slug":"jirei","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T16:34:16.792Z","latestAt":"2026-06-19T16:34:16.792Z"},{"id":"019ee0bb-ab8a-72c2-ad15-82fbd734a509","type":"creator.followed","target":{"type":"creator","id":"b52ec26d-e0c3-4d1c-bddf-4dbf55338e4f","preview":"FrameBuild","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/238316/avatar-ELWQF8t3QI529f2aF3wSmDGBYHpPtI.jpg","slug":"framebuild","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","avatar":null,"slug":"jirei","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T16:34:16.070Z","latestAt":"2026-06-19T16:34:16.070Z"},{"id":"019ee0bb-a5e0-7109-abcd-27e4ed3447b9","type":"creator.followed","target":{"type":"creator","id":"d395d88d-b06e-4fa0-8957-02027d288000","preview":"Ali Saeed","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1058990/avatar-PNEKX2JKsKYXUA7ykJuWX7P3Qsjq2u.jpg","slug":"ali-saeed-creative","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","avatar":null,"slug":"jirei","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T16:34:14.621Z","latestAt":"2026-06-19T16:34:14.621Z"},{"id":"019ededc-60b9-71aa-ab4d-72d6a58596eb","type":"creator.followed","target":{"type":"creator","id":"041629f1-dcfa-477e-a00d-bce530716f2e","preview":"Abdullah Chowdury Prince","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/041629f1-dcfa-477e-a00d-bce530716f2e/4bf7ewgc","slug":"abdullah-chowdury-prince","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","avatar":null,"slug":"jirei","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T07:50:45.167Z","latestAt":"2026-06-19T07:50:45.167Z"},{"id":"019ededc-5e0b-7324-8afb-1c9e8c2ccd96","type":"creator.followed","target":{"type":"creator","id":"215ddceb-c9fe-4a9c-823e-0fc4615f9e14","preview":"Shoaib Muhammad","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/215ddceb-c9fe-4a9c-823e-0fc4615f9e14/hsyep3nd","slug":"shoaib-muhammad-xtlf3o","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","avatar":null,"slug":"jirei","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T07:50:44.488Z","latestAt":"2026-06-19T07:50:44.488Z"},{"id":"019ededc-58f4-775d-bedf-11767c0c969b","type":"creator.followed","target":{"type":"creator","id":"372cf479-24e6-4c17-bd43-429a76e907a3","preview":"Divplate","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/372cf479-24e6-4c17-bd43-429a76e907a3/ooc5lttx","slug":"divplate","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","avatar":null,"slug":"jirei","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T07:50:43.176Z","latestAt":"2026-06-19T07:50:43.176Z"},{"id":"019ededc-5461-7009-a163-2bb24646b1b0","type":"creator.followed","target":{"type":"creator","id":"3bceb8a6-ecad-4058-affd-73e9206c7f4a","preview":"Valentin Flageul","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/140924/avatar-qhiCuzWznpwKVX4bwNG5qZ73waDex4.jpg","slug":"valentinflageul","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","avatar":null,"slug":"jirei","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T07:50:42.014Z","latestAt":"2026-06-19T07:50:42.014Z"},{"id":"019ededc-525d-751a-9a51-c0ed4dd415d9","type":"creator.followed","target":{"type":"creator","id":"3fc00e47-c692-4bee-8134-6528efa80a1e","preview":"TaktForm","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/489296/avatar-BEGwlOas8ClsvEH0ayihFWJI4HzcqV.jpg","slug":"taktform","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","avatar":null,"slug":"jirei","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T07:50:41.497Z","latestAt":"2026-06-19T07:50:41.497Z"},{"id":"019ededc-503d-72d9-81b8-6b991e2ca32b","type":"creator.followed","target":{"type":"creator","id":"43557a4c-29c9-4c45-b0e8-e36182061489","preview":"Kris","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/725057/avatar-VDQJIPQ3pVFic33DgLUMjxq31luCLU.jpg","slug":"kris-designs","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","avatar":null,"slug":"jirei","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T07:50:40.952Z","latestAt":"2026-06-19T07:50:40.952Z"},{"id":"019ededc-4ac0-7638-9523-a83e897c79ed","type":"creator.followed","target":{"type":"creator","id":"5a8fe6df-024d-4c89-8b1a-570e37bcbe89","preview":"Flowmance","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5a8fe6df-024d-4c89-8b1a-570e37bcbe89/2153vn59","slug":"flowmance","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","avatar":null,"slug":"jirei","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T07:50:39.548Z","latestAt":"2026-06-19T07:50:39.548Z"}],"pagination":{"next":"MjAyNi0wNi0xOVQwNzo1MDozOS41NDhafDAxOWVkZWRjLTRhYzAtNzYzOC05NTIzLWE4M2U4OTdjNzllZA","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:ff3d8eca-ae13-4845-bd7e-9c26d1085c71:/unified/posts/?creator=ff3d8eca-ae13-4845-bd7e-9c26d1085c71&with=reposts":[{"data":[{"id":"019dfc63-9b40-751a-a9de-0c9fd316fc8e","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"tdUVkajUOSOL5Vme6SNe","resolved":true,"title":"Geometric Scatter","body":"$52","bodyJson":null,"introduction":"Interactive image slicing.","slug":"geometric-scatter","author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/tdUVkajUOSOL5Vme6SNe/geometric-scatter-f8e7VoZJ4JpR4arON7iRve3SSOqZUn","metadata":{"tint":{"h":180,"s":17,"l":53},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-20T20:16:25.032Z","updatedAt":"2026-07-30T21:32:31.720Z","publishedAt":"2026-05-06T08:24:39.488Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/GeometricScatter-OJre9i.js@GdCeo3Lu7dTea0skk1Fg","previewUrl":"https://thriving-lottery-007128.framer.app/preview","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"GdCeo3Lu7dTea0skk1Fg","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-06T08:24:39.488Z","updatedAt":"2026-05-06T08:24:39.488Z"},{"id":"019df81c-9155-7230-aca9-093d776a0b41","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"xvKiurNOeIVwRQ68j226","resolved":true,"title":"Shuffling Squares","body":"$53","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"### Key Features","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"* "},{"type":"text","text":"Dynamic Scatter Animation:","marks":[{"type":"bold"}]},{"type":"text","text":" As you scroll down your page, the image squares fly in from the sides and below, seamlessly snapping together into a perfect grid using smooth spring physics."}]},{"type":"paragraph","content":[{"type":"text","text":"* "},{"type":"text","text":"Magnetic Hover Effects:","marks":[{"type":"bold"}]},{"type":"text","text":" Hovering over the grid brings it to life. The highlighted section gently pops out, while the neighboring squares physically push away and glaze over with a beautiful frosted glass effect."}]},{"type":"paragraph","content":[{"type":"text","text":"* "},{"type":"text","text":"Smart Hover Brush:","marks":[{"type":"bold"}]},{"type":"text","text":" The component automatically adapts to your grid complexity. Small grids highlight individual squares, while massive grids dynamically highlight entire clusters, ensuring the interaction always feels perfect."}]},{"type":"paragraph","content":[{"type":"text","text":"* "},{"type":"text","text":"SEO & Performance Optimized:","marks":[{"type":"bold"}]},{"type":"text","text":" Under the hood, your image remains 100% crawlable by search engines (via visually hidden tags) and implements an advanced static fallback for the Framer canvas and Server-Side Rendering (SSR), ensuring your site stays blazing fast."}]},{"type":"paragraph","content":[{"type":"text","text":"### Customization Options","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"* "},{"type":"text","text":"Image:","marks":[{"type":"bold"}]},{"type":"text","text":" Upload any image or pull directly from your CMS."}]},{"type":"paragraph","content":[{"type":"text","text":"* "},{"type":"text","text":"Grid Size (2-20):","marks":[{"type":"bold"}]},{"type":"text","text":" Choose anything from a subtle 4-piece split to a complex 400-piece mosaic."}]},{"type":"paragraph","content":[{"type":"text","text":"* "},{"type":"text","text":"Gap & Spacing:","marks":[{"type":"bold"}]},{"type":"text","text":" Dial in exactly how much space you want between the slices."}]},{"type":"paragraph","content":[{"type":"text","text":"* "},{"type":"text","text":"Borders:","marks":[{"type":"bold"}]},{"type":"text","text":" Add and style borders around the grid cells with custom width, color, and border radius."}]},{"type":"paragraph","content":[{"type":"text","text":"* "},{"type":"text","text":"Independent Animations:","marks":[{"type":"bold"}]},{"type":"text","text":" Full control to independently disable the initial appear scatter animation or the hover interaction."}]},{"type":"paragraph","content":[{"type":"text","text":"* "},{"type":"text","text":"Image Fit:","marks":[{"type":"bold"}]},{"type":"text","text":" Switch between "},{"type":"text","text":"Cover","marks":[{"type":"italic"}]},{"type":"text","text":", "},{"type":"text","text":"Contain","marks":[{"type":"italic"}]},{"type":"text","text":", or "},{"type":"text","text":"Fill","marks":[{"type":"italic"}]},{"type":"text","text":" depending on your layout constraints."}]},{"type":"paragraph","content":[{"type":"text","text":"* "},{"type":"text","text":"Entry Delay:","marks":[{"type":"bold"}]},{"type":"text","text":" Control exactly how long the component waits to assemble once it scrolls into view, perfect for staggering multiple animations on a page."}]}]},"introduction":"Interactive image grid.","slug":"shuffling-squares","author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/xvKiurNOeIVwRQ68j226/shuffling-squares-fidHVEWvfUuMTgTlgnQwsEAh0CEdsl","metadata":{"tint":{"h":300,"s":53,"l":63},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-19T16:57:48.712Z","updatedAt":"2026-07-30T21:33:28.816Z","publishedAt":"2026-05-05T12:28:35.029Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/ImageSquares-VNaclm.js@JPLujGkusN6TnRkZDEzF","previewUrl":"https://moccasin-gibbon-261538.framer.app/preview","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"JPLujGkusN6TnRkZDEzF","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-05T12:28:35.029Z","updatedAt":"2026-05-05T12:28:35.029Z"},{"id":"019df231-1694-7e20-b8a8-3b3b95688284","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"2XafbCqATzsyzbY7JksW","resolved":true,"title":"Striped Carousel","body":"$54","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Elevate your Framer site with a completely custom, highly-performant photo gallery component. The Striped Carousel replaces basic sliding animations with a sophisticated \"falling curtain\" transition that adds a premium, dynamic feel to your portfolio or landing page."}]},{"type":"paragraph","content":[{"type":"text","text":"### Key Features","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Dynamic Transition:","marks":[{"type":"bold"}]},{"type":"text","text":" Images are sliced into perfectly aligned vertical stripes that fall away in a staggered sequence depending on navigation direction."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Hardware Accelerated:","marks":[{"type":"bold"}]},{"type":"text","text":" Built with advanced CSS `transform` and `borderRadius` mathematics to ensure subpixel perfection and flawless 120fps rendering, avoiding the lag of heavy `clip-path` calculations."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Responsive Layout:","marks":[{"type":"bold"}]},{"type":"text","text":" Works beautifully at any aspect ratio, with images automatically scaling via native `cover` logic."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Fast Navigation Support:","marks":[{"type":"bold"}]},{"type":"text","text":" Click through images as fast as you want—in-progress animations will seamlessly snap to completion to keep up with the user."}]},{"type":"paragraph","content":[{"type":"text","text":"### Customization Options","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Available directly in the Framer Property Panel:"}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Images:","marks":[{"type":"bold"}]},{"type":"text","text":" Add as many photos as you want via standard Framer image arrays."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Stripes:","marks":[{"type":"bold"}]},{"type":"text","text":" Control the exact number of slices (up to 20 for optimal performance)."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Animation:","marks":[{"type":"bold"}]},{"type":"text","text":" Fine-tune the fall distance, total duration, and stagger gap."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Aesthetics:","marks":[{"type":"bold"}]},{"type":"text","text":" Configure border radius, width, color, and style."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Arrows:","marks":[{"type":"bold"}]},{"type":"text","text":" Fully style the navigation arrows (Size, Background, Color)."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Overflow:","marks":[{"type":"bold"}]},{"type":"text","text":" Toggle whether the falling stripes are hidden by the component bounds or visibly fall outside of them."}]},{"type":"paragraph"}]},"introduction":"Striped image reveal transition.","slug":"striped-carousel","author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/2XafbCqATzsyzbY7JksW/striped-carousel-bYhXYZyGozdqDeeXF8tWNQTL5DA3Ma","metadata":{"tint":{"h":180,"s":53,"l":42},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-02T18:11:29.587Z","updatedAt":"2026-07-30T21:32:58.925Z","publishedAt":"2026-05-04T08:53:16.564Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Striped-Reveal-Carousel-2BSIXw.js@hXqQjNHLVOnMuKXeBFX8","previewUrl":"https://diverse-absolute-231370.framer.app/preview","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"hXqQjNHLVOnMuKXeBFX8","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-04T08:53:16.564Z","updatedAt":"2026-05-04T08:53:16.564Z"},{"id":"019ddd4e-6596-72d8-98e8-4c4e3a84e4df","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"9LvMPb65yzqu2f70ZTvG","resolved":true,"title":"Sticker Peel Scroll","body":"$55","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A highly interactive, physics-inspired sticky scroll component for Framer. As users scroll down your page, the topmost card elegantly bends and peels off from the top-right corner—revealing the next card in the deck. It's built entirely natively with `framer-motion` and CSS clip-paths for buttery smooth, 60fps performance without taking over the native browser scroll."}]},{"type":"paragraph","content":[{"type":"text","text":"Features & Customization:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Dynamic Content:","marks":[{"type":"bold"}]},{"type":"text","text":" Accept arbitrary Framer components (using native Slots) or quickly upload an array of images."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Tactile Peel Effect:","marks":[{"type":"bold"}]},{"type":"text","text":" Features a folding sticker flap that mirrors the cut path perfectly, complete with dynamic drop shadows that cast realistic depth onto the underlying cards."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Customizable Flap:","marks":[{"type":"bold"}]},{"type":"text","text":" Adjust the back color of the peeling sticker. Supports solid colors or rich Framer gradients."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Responsive Sizing:","marks":[{"type":"bold"}]},{"type":"text","text":" Configure exact Card Width and Height controls, with horizontal overflow protection to ensure a perfect fit on mobile devices."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Alignment:","marks":[{"type":"bold"}]},{"type":"text","text":" Control the alignment (X and Y) of the card deck within the viewport."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Accessibility:","marks":[{"type":"bold"}]},{"type":"text","text":" Includes a robust \"Disable Animation\" toggle, allowing the component to fall back to a static layout for accessibility and performance."}]},{"type":"paragraph"}]},"introduction":"Peeling effect for scroll cards.","slug":"sticker-peel-scroll","author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/9LvMPb65yzqu2f70ZTvG/sticker-peel-scroll-TEu5teEiOgrAo9mkcm221OH7dFSVw3","metadata":{"tint":{"h":60,"s":77,"l":34},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-29T09:46:27.797Z","updatedAt":"2026-07-30T21:31:56.695Z","publishedAt":"2026-04-30T07:33:15.798Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Sticker-Peel-IfSBKh.js@KWFuCR8cHZh4fVBaDaOi","previewUrl":"https://happy-office-937273.framer.app/preview","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"KWFuCR8cHZh4fVBaDaOi","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-30T07:33:15.798Z","updatedAt":"2026-04-30T07:33:15.798Z"},{"id":"019ddd4b-fd9e-7b37-b145-d6167285d211","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"iHwV5lrnF8BDwcxFR6Yi","resolved":true,"title":"Minimal Video Player","body":"$56","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Upgrade your website’s media experience with the "},{"type":"text","text":"Minimal Video Player","marks":[{"type":"bold"}]},{"type":"text","text":", a custom-built HTML5 video component designed natively for Framer. Gone are the days of rigid, unstyleable default browser players. This component introduces a soft, neumorphic aesthetic with buttery-smooth micro-interactions, while fully supporting the native capabilities you expect from Framer's default video component."}]},{"type":"paragraph","content":[{"type":"text","text":"Key Features:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Native Framer Power:","marks":[{"type":"bold"}]},{"type":"text","text":" Supports URL or direct file uploads, autoplay, looping, muting, object-fit settings, and custom poster images—just like Framer's native player."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Neumorphic Design:","marks":[{"type":"bold"}]},{"type":"text","text":" Soft, transitioning shadows give the player a tactile, physical feel."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Morphing Play Controls:","marks":[{"type":"bold"}]},{"type":"text","text":" A custom SVG play/pause button that smoothly animates and depresses when activated."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Interactive Timeline:","marks":[{"type":"bold"}]},{"type":"text","text":" A fully custom progress bar that supports smooth click-and-drag scrubbing to easily seek through your videos."}]},{"type":"paragraph","content":[{"type":"text","text":"Customization Options:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Colors & Styles:","marks":[{"type":"bold"}]},{"type":"text","text":" Full control over the player background, icon colors, and video background."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Progress Bar:","marks":[{"type":"bold"}]},{"type":"text","text":" Choose between a solid color or a customizable two-color gradient for the timeline fill."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Shadows:","marks":[{"type":"bold"}]},{"type":"text","text":" Customize both the light and dark shadow colors (with RGBA support) to perfectly match your site's background, whether it's light, dark, or tinted."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Border Radii:","marks":[{"type":"bold"}]},{"type":"text","text":" Independently adjust the corner roundness of the outer container, the inner video, and even the play/pause button."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Start Time:","marks":[{"type":"bold"}]},{"type":"text","text":" Set a specific percentage for the video to begin playing from."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Disable Animations:","marks":[{"type":"bold"}]},{"type":"text","text":" A built-in toggle to disable the morphing icons and shadow transitions for accessibility or performance preferences."}]},{"type":"paragraph","content":[{"type":"text","text":"Performance & Accessibility:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- Highly optimized using Framer's `useIsStaticRenderer` to ensure zero performance overhead while editing on the canvas."}]},{"type":"paragraph","content":[{"type":"text","text":"- Smooth `requestAnimationFrame` loop for progress updates, which automatically cleans up when paused."}]},{"type":"paragraph","content":[{"type":"text","text":"- Fully semantic HTML5 video tag usage."}]}]},"introduction":"Elegant neumorphic video player.","slug":"minimal-video-player","author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/iHwV5lrnF8BDwcxFR6Yi/minimal-video-player-4UtdgB3AmRxudSnGXH2WMxO2NbyVsg","metadata":{"tint":{"h":240,"s":53,"l":70},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-29T09:19:25.771Z","updatedAt":"2026-07-30T21:31:08.211Z","publishedAt":"2026-04-30T07:30:38.110Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Video-Player-HLP2rt.js@6uLpuY5WxssdoJdMqFa7","previewUrl":"https://knowingly-instance-113623.framer.app/preview","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"ae04a700-60cc-429a-b133-88f3c9709ec0","name":"Players","slug":"players"}],"lastSaveId":"6uLpuY5WxssdoJdMqFa7","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":14,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-30T07:30:38.110Z","updatedAt":"2026-04-30T07:30:38.110Z"},{"id":"019ddaf0-1530-735f-9743-900294548b29","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"Q4wSFZMIm9nqrK5YqYLc","resolved":true,"title":"Clean Toggle","body":"$57","bodyJson":null,"introduction":"Clean Futuristic Toggle","slug":"clean-toggle","author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Q4wSFZMIm9nqrK5YqYLc/clean-toggle-MmKVv2xegMrgYiOA2ON7p3zJxvLDmT","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-17T11:37:51.385Z","updatedAt":"2026-05-02T20:46:16.715Z","publishedAt":"2026-04-29T20:31:00.400Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Clean-Futuristic-Toggle-ZcmJw2.js@6R6adiCNpSsILZijMR40","previewUrl":"https://brave-square-114083.framer.app/toggle-preview","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"6R6adiCNpSsILZijMR40","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-29T20:31:00.400Z","updatedAt":"2026-04-29T20:31:00.400Z"},{"id":"019dd0d3-3f72-7af5-8dd2-5297209e9543","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"bIzfpBoDfd0Ytt45YESR","resolved":true,"title":"Grid Text Reveal","body":"$58","bodyJson":null,"introduction":"Dynamic text grid reveal.","slug":"grid-text-reveal","author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/bIzfpBoDfd0Ytt45YESR/grid-text-reveal-ClRclfMIJRlmcV9m8BSQjfkQkPXeYS","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-22T16:24:30.455Z","updatedAt":"2026-07-30T21:30:28.563Z","publishedAt":"2026-04-27T21:23:18.514Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/GridTextReveal-7r8UUP.js@thmjNX0M9EwVRK7pViFC","previewUrl":"https://wise-job-311819.framer.app/preview","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"thmjNX0M9EwVRK7pViFC","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-27T21:23:18.514Z","updatedAt":"2026-04-27T21:23:18.514Z"},{"id":"019dd0d3-2e45-74e2-b7b7-f1a2261cbffa","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"fxh2jRjFOVjIVzp90KZt","resolved":true,"title":"Liquid Text Reveal","body":"$59","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Elevate your site's typography with a mesmerizing, physics-inspired liquid filling effect. "},{"type":"text","text":"Liquid Text Reveal","marks":[{"type":"bold"}]},{"type":"text","text":" acts as a drop-in text component that seamlessly fills your words like a glass of water when they scroll into view. Built specifically for Framer, it flawlessly handles complex descenders, perfectly supports custom Web Fonts, and features fully independent horizontal wave mechanics for a continuous, smooth flow."}]},{"type":"paragraph","content":[{"type":"text","text":"### 🔥 Key Features","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"* "},{"type":"text","text":"Continuous Fluid Motion:","marks":[{"type":"bold"}]},{"type":"text","text":" The wave never stops rippling. It utilizes Framer Motion's imperative animation loops for butter-smooth horizontal flow, independently decoupled from the vertical fill."}]},{"type":"paragraph","content":[{"type":"text","text":"* "},{"type":"text","text":"Gradients & Solids:","marks":[{"type":"bold"}]},{"type":"text","text":" Fill your text with a simple solid color, or unlock stunning visuals using fully configurable CSS gradients."}]},{"type":"paragraph","content":[{"type":"text","text":"* "},{"type":"text","text":"Flawless Clipping & Alignment:","marks":[{"type":"bold"}]},{"type":"text","text":" Engineered to bypass notorious browser text-clipping bugs. Safe for ascenders and descenders (like the letters \"p\", \"q\", and \"g\") so your fluid never randomly gets chopped off."}]},{"type":"paragraph","content":[{"type":"text","text":"* "},{"type":"text","text":"Static Mode Support:","marks":[{"type":"bold"}]},{"type":"text","text":" Want a static, half-filled text look without the animation? Just set the fill percentage and toggle to Static Fill mode."}]},{"type":"paragraph","content":[{"type":"text","text":"### 🎛️ Customization Controls","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"* "},{"type":"text","text":"Typography:","marks":[{"type":"bold"}]},{"type":"text","text":" Full access to Framer's native Font controls (Size, Variant, Line Height, Letter Spacing, Alignment)."}]},{"type":"paragraph","content":[{"type":"text","text":"* "},{"type":"text","text":"Fill Style:","marks":[{"type":"bold"}]},{"type":"text","text":" Toggle between Solid Color or Gradient (with controls for Start/End colors and Angle)."}]},{"type":"paragraph","content":[{"type":"text","text":"* "},{"type":"text","text":"Wave Physics:","marks":[{"type":"bold"}]},{"type":"text","text":" Control the Wave Height, Wave Width, Flow Speed, and Flow Direction (Left to Right / Right to Left)."}]},{"type":"paragraph","content":[{"type":"text","text":"* "},{"type":"text","text":"Target Fill (%):","marks":[{"type":"bold"}]},{"type":"text","text":" Decide exactly how high the liquid rises (e.g., fill to 100% and disappear, or stop halfway at 50%)."}]},{"type":"paragraph","content":[{"type":"text","text":"* "},{"type":"text","text":"Styling FX:","marks":[{"type":"bold"}]},{"type":"text","text":" Built-in toggles for Text Shadows (X, Y, Blur, Color) and Text Borders (Stroke Width, Color)."}]},{"type":"paragraph","content":[{"type":"text","text":"* "},{"type":"text","text":"Timing:","marks":[{"type":"bold"}]},{"type":"text","text":" Configure the Fill Duration and Entry Delay for the reveal animation."}]},{"type":"paragraph","content":[{"type":"text","text":"* "},{"type":"text","text":"Disable Animation:","marks":[{"type":"bold"}]},{"type":"text","text":" One-click toggle to disable all movement for accessibility or static mockups."}]},{"type":"paragraph"}]},"introduction":"Fluid text animations with wave.","slug":"liquid-text-reveal","author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/fxh2jRjFOVjIVzp90KZt/liquid-text-reveal-3o6OPKUre8DbsUvLQqDwEe0eMGDkwp","metadata":{"tint":{"h":300,"s":53,"l":63},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-24T13:10:37.280Z","updatedAt":"2026-07-30T21:30:01.501Z","publishedAt":"2026-04-27T21:23:14.117Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Liquid-Text-Reveal-t3O8g3.js@s00zMQLn46DMdM18SvcJ","previewUrl":"https://gregarious-types-958461.framer.app/preview","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"s00zMQLn46DMdM18SvcJ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-27T21:23:14.117Z","updatedAt":"2026-04-27T21:23:14.117Z"},{"id":"019dd0d3-1e4c-78ab-aeb2-0cfb8d942512","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"6mwFhzs8XPWpzJY3rR85","resolved":true,"title":"Paper Curtains","body":"$5a","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"### A Dramatic Scroll Reveal for Text","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Paper Curtains places a row of colored strips over your text that peel away with a satisfying, physics-based animation the moment they scroll into view. It's a simple idea executed with polish—perfect for hero headings, pull quotes, or any text that deserves an entrance."}]},{"type":"paragraph","content":[{"type":"text","text":"### 5 Fall Directions × 5 Stagger Patterns","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Mix and match to create dozens of unique reveal styles:"}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Fall Directions","marks":[{"type":"bold"}]},{"type":"text","text":": Down, Up, Split, Alternating, and Scatter Drop—each with its own 3D rotation and physics feel."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Stagger Patterns","marks":[{"type":"bold"}]},{"type":"text","text":": Left to Right, Right to Left, Center Out, Edges In, or Random—control the order the strips peel off."}]},{"type":"paragraph","content":[{"type":"text","text":"### Full Visual Customization","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Every visual aspect of the curtains is exposed in the Framer property panel:"}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Solid or Gradient Fill","marks":[{"type":"bold"}]},{"type":"text","text":": Switch between a flat color and a configurable linear gradient with start color, end color, and angle controls."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Border Styling","marks":[{"type":"bold"}]},{"type":"text","text":": Add borders to each strip with independent width, color, and style (solid, dashed, or dotted) controls."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Corner Radius","marks":[{"type":"bold"}]},{"type":"text","text":": Round the corners of each strip from sharp rectangles to soft pills."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Curtain Count & Oversize","marks":[{"type":"bold"}]},{"type":"text","text":": Fine-tune how many strips cover the text and how far they extend beyond the text bounds."}]},{"type":"paragraph","content":[{"type":"text","text":"### Full Font Control","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Uses Framer's native extended font controls—set the family, weight, size, line height, letter spacing, and alignment directly in the property panel. No CSS overrides needed."}]},{"type":"paragraph","content":[{"type":"text","text":"### Designer-Friendly Canvas Tools","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Preview Curtains Toggle","marks":[{"type":"bold"}]},{"type":"text","text":": Show curtains at rest on the canvas so you can style colors, gradients, and borders visually—then hide them to check the revealed text layout."}]},{"type":"paragraph","content":[{"type":"text","text":"### Performant & Production Ready","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Spring Physics","marks":[{"type":"bold"}]},{"type":"text","text":": Powered by Framer Motion springs for smooth, hardware-accelerated animation."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Scroll-Triggered","marks":[{"type":"bold"}]},{"type":"text","text":": Uses `useInView` with a `once` trigger so the animation fires exactly once and the strips are removed from the DOM after they fall."}]}]},"introduction":"text reveal animation.","slug":"paper-curtains","author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/6mwFhzs8XPWpzJY3rR85/paper-curtains-Rakw2mfoIEI0qrXlUvnkNBp1JcRUuZ","metadata":{"tint":{"h":0,"s":77,"l":67},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-21T09:41:52.898Z","updatedAt":"2026-07-30T21:29:27.355Z","publishedAt":"2026-04-27T21:23:10.028Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/TextPaperCurtains-fc2PHM.js@NuMIUvosD7AaKvVUQnKi","previewUrl":"https://angelic-population-386007.framer.app/preview","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"NuMIUvosD7AaKvVUQnKi","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-27T21:23:10.028Z","updatedAt":"2026-04-27T21:23:10.028Z"},{"id":"019dd048-138b-7912-bc80-e0d38ec604f9","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"ThInMBGLWnLLXCS4oVUF","resolved":true,"title":"Color Reveal Lens","body":"$5b","bodyJson":null,"introduction":"Color reveal hover effect","slug":"colorreveallens","author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/ThInMBGLWnLLXCS4oVUF/colorreveallens-19AeUXzcVD550dZGsExpmk3uDhutBn","metadata":{"tint":{"h":345,"s":58,"l":65},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-20T15:15:18.492Z","updatedAt":"2026-07-30T21:26:45.320Z","publishedAt":"2026-04-27T18:51:17.771Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/ColorRevealLens-Hiv7mM.js@r5BVbIP7yY4Y5XqqzeGE","previewUrl":"https://soft-lily-451009.framer.app/preview","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"r5BVbIP7yY4Y5XqqzeGE","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-27T18:51:17.771Z","updatedAt":"2026-04-27T18:51:17.771Z"},{"id":"019dce27-413a-7963-99ce-ce0f180fbe49","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"A1yKrwe3jO9y3ie0zxD1","resolved":true,"title":"Clean Futuristic Btn","body":"$5c","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Overview"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"A sleek, modern button with a soft neumorphic feel and a glowing cyan gradient border that makes it stand out without being aggressive. Perfect for hero sections, contact CTAs, or anywhere you want a polished, high-tech aesthetic that feels premium yet minimal."}]},{"type":"customHeading","content":[{"type":"text","text":"What's Included"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"This component comes in two functional behaviors, split across three variants:"}]},{"type":"paragraph","content":[{"type":"text","text":"The Auto-Switching Button (Base & Temporary Highlight)","marks":[{"type":"bold"}]},{"type":"text","text":" — Both of these variants automatically animate the button between its resting and highlighted states — this includes both the text color cycling between the base and temporary highlight color, and the gradient border animating alongside it. The only difference between them is the starting state — "},{"type":"text","text":"Base","marks":[{"type":"bold"}]},{"type":"text","text":" begins in the gray resting color, while "},{"type":"text","text":"Temporary Highlight","marks":[{"type":"bold"}]},{"type":"text","text":" begins already in the highlighted state. Pick whichever starting state fits your layout best."}]},{"type":"paragraph","content":[{"type":"text","text":"Fixed Version","marks":[{"type":"bold"}]},{"type":"text","text":" — A calmer alternative that disables all automatic animation entirely. The text stays permanently in the base color, the gradient border stays static, and the only interaction that occurs is on hover. Use this when you want a refined, understated button that doesn't draw unsolicited attention."}]},{"type":"customHeading","content":[{"type":"text","text":"Settings"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Property Description "},{"type":"text","text":"Text","marks":[{"type":"bold"}]},{"type":"text","text":" The button label. Defaults to \"Contact Us\" — change it to anything. "},{"type":"text","text":"Text Base Color","marks":[{"type":"bold"}]},{"type":"text","text":" The resting text color (default #80878A, soft slate gray). Also the permanent color in the Fixed Version. "},{"type":"text","text":"Text Hover Color","marks":[{"type":"bold"}]},{"type":"text","text":" The color the text shifts to when hovered (default #82BDCF, bright cyan). "},{"type":"text","text":"Temporary Highlight Text Color","marks":[{"type":"bold"}]},{"type":"text","text":" The color the text cycles to during the automatic animation in the Base and Temporary Highlight variants (default #82BDCF). Can be set independently from the hover color. "},{"type":"text","text":"Link","marks":[{"type":"bold"}]},{"type":"text","text":" Optional URL the button navigates to on click. "},{"type":"text","text":"New Tab","marks":[{"type":"bold"}]},{"type":"text","text":" Toggle whether the link opens in a new browser tab. "},{"type":"text","text":"Smooth Scroll","marks":[{"type":"bold"}]},{"type":"text","text":" Enable smooth scrolling when linking to an anchor on the same page."}]},{"type":"customHeading","attrs":{"level":1}},{"type":"customHeading","attrs":{"level":1}},{"type":"paragraph"}]},"introduction":"Clean Futuristic Button","slug":"clean-futuristic-btn","author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/A1yKrwe3jO9y3ie0zxD1/clean-futuristic-btn-B4Rr7kRkF8m4PoaToPQTfIpOXAfV6S","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-16T09:24:47.990Z","updatedAt":"2026-07-30T21:28:10.843Z","publishedAt":"2026-04-27T08:56:12.346Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Clean-Futuristic-Button-ItlAoY.js@h9GTTk2fL9ljPWOOPaTJ","previewUrl":"https://brave-square-114083.framer.app/button-preview","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"h9GTTk2fL9ljPWOOPaTJ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-27T08:56:12.346Z","updatedAt":"2026-04-27T08:56:12.346Z"},{"id":"019d936f-cfd9-71c4-ae7d-7a57d0aff1d4","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"7f3StrcnPjpZIMzmLHMb","resolved":true,"title":"Elegant CTA Button","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A fully customizable "},{"type":"text","text":"Elegant CTA Button","marks":[{"type":"bold"}]},{"type":"text","text":" built for Framer. Features a dark metallic base state and a brushed steel hover — but it's not limited to that. Customize the text, text color, font size, icon color, icon container border, radius, padding, gap between icon and text, outer border, inner padding, and both base and hover shadow layers to match any brand. The layered shadow system (4 shadows per state) creates realistic depth — just update the warm-hued shadows to match your accent color when changing the main color. Ideal for booking flows, agency heroes, or any premium CTA."}]},{"type":"paragraph","content":[{"type":"text","text":"Settings of the component:"}]},{"type":"customImage","attrs":{"alt":"","src":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-f9hsrtrk-MZRVtlnTydjWQQo8XcnK6iyzWmceO5","link":null,"caption":"","uploadId":null}},{"type":"customImage","attrs":{"alt":"","src":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-f9hsrtrk-yddBRbKeuv5g8HTuMcPmdQGvDR8DhE","link":null,"caption":"","uploadId":null}},{"type":"paragraph","content":[{"type":"text","text":"Also totally fine to unlink and customize further if preferring using it as a base."}]}]},"introduction":"Elegantly Call to Action","slug":"elegant-cta-button","author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/7f3StrcnPjpZIMzmLHMb/elegant-cta-button-bFje98QBCnMwQa6L4hIjsUWdbz59fY","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-13T22:41:50.772Z","updatedAt":"2026-07-30T21:28:40.423Z","publishedAt":"2026-04-15T23:17:51.705Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Elegant-CTA-Button-bdMwoh.js@sfC57FfVrLo60q3OFf1h","previewUrl":"https://swift-pudding-289242.framer.app/preview","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"sfC57FfVrLo60q3OFf1h","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-15T23:17:51.705Z","updatedAt":"2026-04-15T23:17:51.705Z"},{"id":"019d936f-bbd6-78d4-9186-b627eeac9063","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"Ytqta3UJI9XPbxSH71UU","resolved":true,"title":"StarQuote Card","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Elevate your website's social proof with this fully customizable testimonial card — designed to look stunning out of the box while giving you complete control over every detail."}]},{"type":"paragraph","content":[{"type":"text","text":"Choose from "},{"type":"text","text":"three layout variants","marks":[{"type":"bold"}]},{"type":"text","text":": a split 2/3 wide picture layout, a full-width picture layout, or a compact version — perfect for any section width or use case. Drop in your customer's photo, name, and review text, then toggle the star rating on or off depending on your needs."}]},{"type":"paragraph","content":[{"type":"text","text":"The rating system supports "},{"type":"text","text":"0.5 increments from 0 to 5 stars","marks":[{"type":"bold"}]},{"type":"text","text":" (think 4.5, 3.5, 2.5 and so on) in both Big and Medium sizes, giving you precise control over how feedback is displayed. Every visual layer is independently adjustable: tweak the back frame color, border, radius, shadows, and content gap to match your brand perfectly. The front frame comes with its own shadow and radius settings, while the floating quote icon has its own container color, border, radius, shadow controls — and yes, "},{"type":"text","text":"the quote mark color itself is independently customizable","marks":[{"type":"bold"}]},{"type":"text","text":" too."}]},{"type":"paragraph","content":[{"type":"text","text":"Additional properties let you fine-tune the "},{"type":"text","text":"testimonial text color","marks":[{"type":"bold"}]},{"type":"text","text":", "},{"type":"text","text":"stars color","marks":[{"type":"bold"}]},{"type":"text","text":", and front frame blur intensity — so whether you're going for glassmorphism, soft minimalism, or bold contrast, this card adapts effortlessly. (unlink the component to customize the font and other properties that can't be surfaced in Framer component properties and need a local style to be customizable from the outside)."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for Framer with clean component properties to minimize extra setup needed and let you comfortably experiment from the component settings. Just drag, drop, and customize."}]},{"type":"paragraph","content":[{"type":"text","text":"Link to the preview: "},{"type":"text","text":"https://dandy-version-098885.framer.app/preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://dandy-version-098885.framer.app/preview","class":null,"target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Settings of the component:"}]},{"type":"customImage","attrs":{"alt":"","src":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-2iup3dvp-e17VzILkuFEVJNx2his0Rf103SX20E","link":null,"caption":"","uploadId":null}},{"type":"customImage","attrs":{"alt":"","src":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-l1t5rq7e-e4TrR70hybkIViXBvXwmGMtIYA4CNN","link":null,"caption":"","uploadId":null}},{"type":"paragraph","content":[{"type":"text","text":"Also totally fine to unlink and customize further if preferring using it as a base."}]},{"type":"paragraph"}]},"introduction":" Testimonial Card with star rating.","slug":"starquote-card","author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Ytqta3UJI9XPbxSH71UU/starquote-card-oCj1u1fA6WhU0grfOua6Y1ezBxQ0bL","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-12T18:53:07.079Z","updatedAt":"2026-07-30T21:26:10.086Z","publishedAt":"2026-04-15T23:17:46.582Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Review-Testimonial-Card-upGX7Y.js@wSceL7ttvrYVPJT0hVyB","previewUrl":"https://dandy-version-098885.framer.app/preview","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"wSceL7ttvrYVPJT0hVyB","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-15T23:17:46.582Z","updatedAt":"2026-04-15T23:17:46.582Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L5f"}]