61:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/04onqby6uwgz7.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0yulab_mho2q7.js","/creators-assets/_next/static/immutable/chunks/3_6nvj55e699g.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/3fyhezch4qqad.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v2aom8xv86j9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0s-n7u5-dwtml.js"],"S"] 62:T819,

Bring your website to life with a realistic, interactive 3D cloth simulation. Grab, drag, and drape dynamic fabric carrying your custom typography or brand imagery in real time—powered by Three.js and Verlet physics with zero external 3D models required.

Key Features

Interactive Physics: Grab and pull the fabric with mouse or touch, complete with realistic wind ripples and gravity.
Custom Text & Images: Write multi-line titles or apply your own custom textures and background graphics.
Custom Pinning Modes: Pin the cloth along the left, right, top edges, corners, or let it free-fall into view.
PBR Material Tuning: Fine-tune surface roughness, metalness, shadows, and lighting for silk, cotton, or metallic sheet looks.
Production-Ready Performance: Responsive layout support, smooth frame rates, and automatic static fallback for search engines.
Property Controls
Text: Multi-line text input with full font customization (font family, weight, size, letter spacing, and color).
Appearance: Switch between Solid Color and Custom Image, with direct control over cloth Roughness and Metalness.
Simulation: Adjust Wind Strength, Gravity, and Fabric Stiffness to simulate everything from stiff leather to lightweight silk.
Pinning: Choose how the fabric hangs: Top Edge, Left Edge, Right Edge, Top + Left, Top + Right, or Free Falling.
Quick Start Guide
1. Drag and drop the component anywhere onto your Framer canvas.
2. Set your desired dimensions (or set width and height to 100% / Fill).
3. Type your text or toggle background to upload a custom image.
4. Select your preferred pinning style and preview the live simulation!

63:T970,

Transform static images into cinematic 3D visual experiences. Mosaic Image Reveal slices any image into a customizable grid and animates it into view with fluid perspective transitions, reactive cursor tilt, and spring physics—all without third-party 3D libraries or heavy assets.

Key Features

9 Cinematic 3D Styles: Choose from Explode, Vortex, Flip 3D, Blinds, Fold, Depth Zoom, Rise, Drop, and Shuffle.
13 Reveal Patterns: Animate tiles sequentially with Center Out, Spiral, Wave, Snake, Checkerboard, Diagonal, and more.
Interactive Cursor Parallax: Silky-smooth 3D tilt tracking that reacts to mouse movement, plus optional hover lift.
Versatile Triggers: Trigger automatically on scroll, on page load, or make it interactive via hover or click.
Built-In Gradient Overlays: Add linear or radial gradient overlays with 16 CSS blend modes for instant color grading.
Performance & Accessibility: Fully responsive, zero external 3D runtime overhead, and automatic graceful fallback for reduced motion preferences.

Property Controls

Layout & Grid: Configure aspect ratios (Intrinsic Image, 16:9, 1:1, custom), row and column counts, gaps, tile radii, and overflow clipping.
Reveal: Select animation patterns, sequence spread time, delay, trigger threshold, and replay settings.
3D Motion: Dial in perspective depth, scatter travel, 3D rotation angle, starting scale, and spring physics.
Interaction: Toggle cursor tilt, customize tilt strength, invert direction, and set hover lift distance.
Overlay: Customize linear or radial gradients, angles, colors, opacity, and mix blend modes.
Quick Start Guide
1. Drag and drop the component onto your Framer canvas.
2. Upload your image (or keep the default placeholder).
3. Pick your preferred 3D Style (e.g. Explode or Vortex) and Reveal Pattern.
4. Set the trigger to In View or Hover, and preview the live animation!

64:T94c,

Transform standard copy into dynamic visual windows. Media Portal Text masks media directly inside words using text clipping. On hover, tap, or scroll, words reveal high-resolution imagery with spring physics, cursor parallax, and 3D tilt while surrounding text dims for maximum focus.

Key Features

Inline Bracket Syntax: Wrap words in [brackets] to turn them into media portals. Use [word](2) to map directly to portal slot #2.
Interactive 3D Motion: Responsive cursor parallax, 3D tilt, hover scale pop, and internal image zoom.
Surrounding Focus: Automatically dims and blurs non-active text to highlight the active visual.
Multiple Trigger Modes: Trigger via Hover, Click/Tap, Scroll In-View (with stagger), or keep Always Visible.
Links & Navigation: Attach internal or external URLs to any portal with new-tab options.
Custom Underlines: Solid, dashed, dotted, or double indicators that can auto-hide when revealed.
Touch & Mobile Ready: Tap once to reveal; tap again to navigate. Includes preloading to avoid loading flashes.

Property Controls

Text & Portals: Full typography styling, bracketed text input, and media/link assignment per slot.
Reveal: Choose trigger mode, duration, background dim opacity, blur amount, and in-view stagger timing.
Motion: Adjust image zoom %, parallax intensity/direction, 3D tilt angle, hover scale, and spring stiffness/damping.
Underline: Set line style, color, em-based thickness, vertical offset, and reveal behavior.
Behavior: Cursor type, text selection toggle, and lazy vs. preload settings.

Quick Start Guide

Drop the component onto your Framer canvas.
Enter your copy in Text: Explore our [work] and meet the [team].
Add images to the Portals list (matches brackets sequentially).
Customize your typography, hover colors, and spring effects!

65:T92a,

Showcase your projects, products, or portfolios with a fluid, continuous 3D carousel. Liquid Ribbon Carousel projects cards along an undulating 3D sine wave, arc, or flat ribbon. Complete with physics-based drag inertia, interactive cursor spotlighting, card tilt, and automatic infinite looping.

Key Features

3D Wave Trajectories: Flow cards along customizable Sine, Arc, or Flat paths with adjustable amplitude, roll, frequency, and 3D twist.
Seamless Ribbon Stitching: Use negative gaps to overlap cards into a continuous, unbroken visual strip.
Fluid Physics & Controls: Smooth drag inertia with friction tuning, trackpad wheel scrolling, keyboard navigation, and card snapping.
Interactive Hover Effects: Dynamic radial spotlight illumination, 3D card tilt, and subtle image zoom on hover.
Atmospheric Depth: Background cards gracefully fade, shrink, and blur based on 3D distance and camera perspective.
Responsive & Infinite: Virtual card replication ensures continuous, smooth infinite loops across all screen sizes.

Property Controls

Items: Add unlimited cards with custom responsive images, titles, subtitles, and click-through links.
Layout & Wave: Tune card width/height, overlap gap, perspective, wave shape (Ribbon/Arc/Flat), amplitude, depth, and twist angles.
Motion: Adjust autoplay speed, scroll direction, pause-on-hover delay, momentum friction, and snap-to-card.
Interaction: Toggle drag, trackpad, arrow keys, click-to-center, card tilt intensity, and radial spotlight glow.
Text & Arrows: Full typography styling, gradient scrim overlays, and optional floating navigation arrows.

Quick Start Guide

Drag the component onto your Framer canvas.
Add your items under the Items control list.
Choose your path shape in Wave (e.g. Ribbon or Arc).
Customize your typography, colors, and preview the live motion!

66:T9d0,

Create eye-catching, continuous 3D kinetic typography. Kinetic Circular Ribbon projects dynamic copy around a twisted torus ring using high-performance 2D Canvas rendering—delivering rich 3D perspective, depth gradients, and physics interactions with zero external 3D library overhead.

Key Features

3D Torus Geometry: Wrap text around a 3D ring with fine control over size, thickness, ribbon twist count, perspective, and X/Y tilts.
Versatile Motion Triggers: Spin continuously, scrub with page scroll, trigger when in view, or combine auto-spin with scroll velocity.
Depth Shading & Glow: Realistic perspective letter scaling, depth-aware opacity fade, near/far dual-color gradients, and optional neon glow.
Interactive Drag & Inertia: Grab and spin with smooth momentum friction, with hover reactions to pause, slow down, speed up, or reverse.
Smart Typography: Supports single phrases or item lists with separators, text casing, natural or even glyph spacing, and an automatic "Fit to Ring" mode.
Ultra Lightweight: Pure Canvas-driven 3D math provides silky 60fps performance without Three.js or heavy dependencies.

Property Controls

Content & Letters: Single string or item lists, repeats, casing, natural/even glyph spacing, and auto-fit scaling.
Ribbon Shape: Adjust outer size, ring thickness, twist count, X/Y tilt angles, perspective depth, and rotation.
Colors & Depth: Solid or depth-blended color palettes, minimum far opacity/scale, and custom glow radius and color.
Animation: Triggers (Always, In View, Scroll, Auto+Scroll), speed, scroll smoothing, direction, and reduced motion fallback.
Interaction: Drag-to-spin sensitivity, momentum inertia, and hover reactions (pause, slow down, speed up, reverse).

Quick Start Guide

Drop the component onto your Framer canvas.
Enter your copy or list items in the Content panel.
Tweak the Ribbon twist, tilt, and size to match your layout.
Select an Animation trigger (e.g. Always or On Scroll) and preview!

67:T9e3,

Create striking, continuous 3D kinetic typography for hero sections, badges, and headers. Kinetic Ribbon bends live text along a 3D cylindrical ring using CSS 3D transforms and Framer Motion—delivering fluid 60fps rotation, scroll interaction, and momentum drag with zero 3D canvas overhead.

Key Features

True 3D Ring Geometry: Position text in 3D space with 3-axis tilts (X, Y, Z), perspective control, inward/outward facing, sine wave undulation, and Möbius-style ribbon twists.
Dual Motion Drivers: Combine smooth continuous auto-spin with scroll-scrubbed rotation, stabilized by critically damped spring physics.
Interactive Drag & Flick: Grab and spin the ring with touch or mouse, featuring realistic inertia momentum and hover reactions (pause, reverse, or speed up).
Depth Fade & Scaling: Automatically dims and scales background letters as they curve away from the camera for realistic depth without expensive filters.
Smart Auto-Fill: Intelligently calculates glyph counts to wrap the ring radius perfectly, or set manual repeats and density.
Ultra Lightweight: Built with pure CSS transforms and Framer Motion for instant page loads and zero external 3D library dependencies.

Property Controls

Content: Single text string or custom word lists with individual colors, separators, letter casing, and auto/manual density.
Typography: Full web font customization, size, letter spacing, line height, and multi-layer neon glow.
3D Ring: Radius, perspective, 3-axis tilts, facing direction, wave height/cycles, twist, and backface culling.
Animation & Depth: Auto-spin speed, scroll speed factor, spring smoothing, distance-based opacity/scale fade, and in-view triggers.
Interaction: Drag-to-spin toggle, drag sensitivity, inertia friction, and hover states.

Quick Start Guide

Drop the component onto your Framer canvas.
Enter your copy or word list in the Content panel.
Adjust the Radius and Tilt in the 3D Ring settings.
Choose an animation mode (Auto Spin, Scroll, or Both) and preview!

68:T968,

Add fluid, organic distortion and ripple effects to your graphics. Liquid Distortion uses hardware-accelerated SVG displacement mapping and procedural turbulence to melt, ripple, and swirl visuals on hover, click, or scroll—delivering rich interactive fluid motion without heavy WebGL or external 3D libraries.

Key Features

7 Distortion Modes: Switch between Heat Haze, Liquid, Ripple, Swirl, Melting, Wave, and digital Glitch effects.
Dual-Image Morph: Seamlessly crossfade and dissolve between two images during interaction transitions.
Chromatic Aberration: Directional RGB color splitting that dynamically separates channels along the distortion angle.
Dynamic Interaction: Cursor-following fluid center, click shockwave impulses ("Wave Pop"), and scroll velocity/progress drivers.
Edge Protection: Built-in overscan compensation prevents seam gaps and transparent borders when clipping.
Performance Optimized: Direct DOM updates without React re-render overhead, selectable FPS caps (30/60/auto), and automatic filter sleep when idle.

Property Controls

Media: Primary image, optional secondary morph image, alt text, and fit mode (Cover or Contain).
Distortion: Mode selection, intensity, wave speed, flow angle, complexity octaves, and RGB split distance.
Interaction: Trigger type (Hover, Scroll, Click, Always), cursor follow %, click shockwave impulse, and fade in/out duration.
Scroll Config: Choose between scroll velocity or progress modes with custom sensitivity and scroll ranges.
Appearance & Advanced: Border radius, box shadow, color tint with blend modes, edge clipping vs. bleed, and FPS limiting.

Quick Start Guide

Drop the component onto your canvas and set your dimensions.
Upload a primary image (and an optional secondary image for hover morphing).
Choose a distortion mode (e.g. Liquid or Ripple) and trigger (Hover or Scroll).
Dial in the intensity and RGB split to preview the live fluid effect!

69:T989,

Add tactile, high-energy interaction to your website with dynamic cursor-following image trails. Snap Cursor Flow spawns responsive media cards as visitors move across the viewport or hover over specific containers, featuring 3D velocity tilt, cinematic reveal animations, and click explosion bursts.

Key Features

6 Reveal Styles: Animate cards into view with Pop, Circle Reveal, Wipe, 3D Flip, Directional Slide, or Glitch transitions.
Physics & 3D Tilt: Cards dynamically lean with momentum, turn toward movement direction, and tilt in 3D based on pointer speed.
Click Bursts: Explode a radial ring of staggered images on click or tap.
Visual FX Suite: Add speed-driven motion blur, RGB chromatic aberration, expanding spawn ripples, and a spring-physics glowing cursor orb.
Global or Local Trigger: Run across the entire viewport using body portals, or constrain trails cleanly inside container bounds.
High Performance: Built-in image preloading prevents first-hover flashes, with memoized rendering for smooth 60fps interaction.

Property Controls

Images: Upload up to 24 images with Sequential, Random, or non-repeating Shuffle playback.
Context: Choose trigger mode (Global Viewport vs. Component Bounds), overflow clipping, touch support, and z-index.
Spawning: Adjust spawn travel distance (density), interval cooldown, maximum active images, random scatter, and click burst counts.
Appearance: Control card width, aspect ratio, image fit (Cover/Contain), corner radius, shadow, opacity, and blend modes.
Animation & Effects: Lifespan, reveal style, drift direction/distance, 3D tilt intensity, motion blur, and glowing cursor orb.

Quick Start Guide

Drop the component onto your Framer canvas.
Add your media to the Images array.
Choose your trigger area (Global for full-page trails or Component Bounds for a specific section).
Select your preferred reveal style (e.g. Pop, Flip, or Glitch) and preview!

6a:T960,

Bring headlines to life with cinematic, curved 3D entrances. Bezier Text 3D animates letters, words, or lines along customizable 3D Bézier trajectories with depth, rotation, scale, and optional blur—driven seamlessly by page scroll or timed triggers.

Key Features

3D Bézier Trajectories: Guide text along X, Y, and Z axes with an adjustable 3D curve control point for dramatic arching and depth overshoot.
Scroll & Time Drivers: Scrub motion smoothly with page scroll (spring-smoothed) or trigger on page load, in-view, or hover.
Granular Splitting: Animate individual letters, words, or lines with customizable stagger timing and directional ordering (Center Out, Edges In, Random, etc.).
Full 3D Entrance FX: Add starting 3D rotations (X, Y, Z), scale, progressive fade-in, and motion blur that settle into crisp, readable text.
SEO & Accessible: Renders an accessible, un-split hidden copy for screen readers and search bots while visual spans handle 3D motion.
Optimized Performance: Direct DOM style writes eliminate React re-render overhead, with full reduced-motion support.

Property Controls

Typography: Full font formatting (family, weight, size, letter spacing, line height), color, and text alignment.
Driven By: Toggle between Scroll (start/end thresholds, smoothing) and Time (duration, delay, easing curves, in-view triggers).
Sequence: Split by Letters, Words, or Lines; set stagger duration, order patterns, and unit easing curves.
3D Path & Entrance: Set perspective, 3D start/curve coordinates (X, Y, Z), 3D rotations, start scale, and blur.
Options: Overflow clipping, accessibility options, and live canvas preview scrubber.

Quick Start Guide

Drop the component onto your Framer canvas.
Enter your copy in the Text control.
Choose your motion mode (Scroll or Time).
Adjust 3D Path coordinates and preview the live flight path!

6b:T9fa,

Turn headlines and body copy into choreographed visual statements. Split-Reveal splits your text by character, word, or line, swinging open like 3D double doors, flipping along perspectives, or scattering into place with spring physics, line masking, and viewport triggers.

Key Features

4 Motion Presets: Choose from Doors (3D swinging), Flip (3D flap reveal), Split (opposing rotational snaps), and Scatter.
Flexible Splitting: Split by Characters, Words, or Lines with automatic grapheme segmentation that preserves complex punctuation and emojis.
Directional Patterns: Direct choreography From Center, To Center, Alternating, Uniform, or Random across Horizontal, Vertical, and Diagonal axes.
Line Masking: Clip lines individually so typography rises or swings fluidly out of invisible slits without clipping outer bounds.
Spring & Tween Physics: Tune spring stiffness, damping, and mass, or switch to customizable easing curves with line-by-line staggered delays.
SEO & Accessible: Renders an accessible, un-split hidden copy for screen readers and search crawlers while visual spans handle 3D motion.

Property Controls

Content: Text string input, split level (Chars, Words, Lines), and semantic HTML tag (H1–H6, P, Div, Span).
Appearance & Layout: Typography styling, text color, line mask toggle, container clipping, and padding.
Choreography: Preset selection, direction vector, dispersal pattern, 3D perspective depth, distance, rotation angle, scale, and entrance blur.
Timing: Motion engine (Spring vs. Tween), duration, stagger timing, sequence order (Center Out, Natural, Reverse, Random), and line delays.
Trigger & Advanced: In-view threshold, viewport offset, hover/tap replay triggers, reduced-motion fallback, and performance character caps.

Quick Start Guide

Drop the component onto your Framer canvas.
Type your headline in Content and select a split mode (e.g. Chars).
Choose a choreography preset (like Doors or Flip).
Set the trigger to In View and preview the live animation!

6c:T942,

Give your typography tactile physical momentum. Scroll Velocity Text Blur reacts in real time to page scroll speed—stretching, skewing, tilting, and blurring text with optical motion blur and spring-damped recovery that settles into crisp readability the moment scrolling stops.

Key Features

Velocity-Driven Physics: Text reacts directly to how fast the user scrolls, driven by smooth, frame-synced springs that prevent jitter.
True Directional Blur: Switch between standard uniform blur or directional SVG motion blur streaks aligned to the scroll axis.
Organic Squash & Stretch: Dynamically stretches along the movement vector while squashing the cross-axis to preserve visual volume.
Weight & Momentum Lag: Add trailing positional lag and 3D perspective tilt that leans typography into the direction of scroll.
Vertical & Horizontal Tracking: Reacts seamlessly to vertical page scrolling or horizontal scroll setups.
Performance Optimized: Includes sub-pixel dead zones to eliminate micro-jitter, automatic spring sleep when idle, and full reduced-motion accessibility.

Property Controls

Typography: Full font formatting, custom color, text alignment, wrap toggles, and semantic SEO tags (H1–H4, P, Span).
Container: Box styling with padding, background fill, border controls, radius, shadow, and overflow clipping.
Tracking: Axis selection, speed sensitivity, response curve (Soft, Linear, Smooth, Sharp), spring stiffness/damping, and an in-canvas preview slider.
Effects: Adjust peak blur intensity, blur mode (Uniform vs. Directional), stretch %, squash %, skew angle, lag distance, 3D tilt, and velocity fade.

Quick Start Guide

Drop the component onto your Framer canvas.
Enter your headline in Text and style your typography.
Set your preferred Tracking sensitivity and spring feel.
Dial in blur, stretch, and skew in Effects, then preview while scrolling!

6d:Tdd8,

AnimSequencer is a visual CSS keyframe animation builder for Framer. Build animations interactively inside the plugin — set properties at each keyframe, drag the timeline, pick an easing, and AnimSequencer writes the code for you. The output is a production-ready Framer Code Override you can apply to any layer instantly.

Built for designers who want real animation control without touching code, and developers who want to skip the boilerplate.

Quick Start

Open AnimSequencer from the Framer Plugin menu
A default Fade In animation loads automatically — hit ▶ Play to preview it
Adjust Duration, Delay, Easing, and other settings to your liking
Build your keyframes on the timeline — drag markers, toggle properties, set values
Go to the Code tab → click Create Override File
In Framer, select any layer → open the Override panel → apply it

The Editor Tab

Timeline Drag diamond markers to reposition keyframes (0–100%). Click to select, use + to add new ones, and set exact positions via the input below. Minimum 2 keyframes required.

Keyframe Properties Toggle on any property per keyframe and set its value:

Opacity, Translate X/Y, Scale, Rotate, Skew X/Y

Duration & Delay Slider + text input + ▲▼ arrows for precise control. Values are in seconds.

Easing 5 standard easings for free. 20+ curves on Pro — Spring, Bounce, Elastic, Expo, and more.

Iterations, Direction & Fill Mode Control how many times the animation plays, which direction, and what state the element holds before and after.

Trigger

On Load — plays immediately on Load. Best for hero sections.
In View — fires once when the element scrolls into the viewport using IntersectionObserver. Best for below-the-fold content.

Presets Tab

Ready-made animation templates organized by category. Click any free preset to load it into the Editor instantly. Pro presets are locked without a license.

Free: Fade In, Slide Up, Scale In.

Pro: Slide Down, Slide Left, Slide Right, Bounce In, Rotate In, Pulse, Shake, Float, Fade Out, Zoom Out, Spin, and more

Code Tab

Generates a Framer Code Override — a .tsx file that wraps any component with CSS animation logic.

Copy Override — copies code to the clipboard
Create Override File — injects it directly into Framer's code panel in one click

The override uses display: contents on its wrapper so Framer's stacks and layout remain completely unaffected. For In View animations, IntersectionObserver handles the trigger — plays once, then cleans up automatically.

Free vs Pro

Free includes:

Full keyframe editor and live preview
Up to 3 keyframes
5 easings, 3 presets

Pro adds:

Unlimited keyframes
20+ easings and 15+ presets
Copy code and create override files in Framer
All future updates — one-time lifetime purchase

6e:Td14,

BrandGuard is a Framer plugin designed to enforce brand consistency across your projects. As design files scale, it's easy for off-brand colors, unapproved fonts, or forbidden words to slip through. BrandGuard acts as an automated QA layer, scanning your entire Framer project—including frames, text nodes, and asset styles—against custom rules you define. Any violations are surfaced in the issues list, and clicking an issue takes you directly to the offending layer.

Key Features

Brand Rule Sets: Group rules into specific collections (e.g., for different clients or brand variants) and switch between them easily.
Color Rules: Define an approved palette or a list of forbidden colors. BrandGuard checks that values for accurate matching.
Font Rules: Restrict typography to approved font families and enforce minimum font sizes to catch manual overrides.
Terminology Rules: Ban specific words (competitor names, off-brand language) and offer replacement suggestions.
Spacing Rules (Pro): Enforce layout grids by ensuring padding uses specific multiples (e.g., an 8px base) and gaps stay within a defined range.
Border Radius Rules (Pro): Restrict your UI to an allowed list of corner radius values or set a maximum radius limit.
Text Style Usage Rules (Pro): Ensure all text layers are linked to defined text styles in the Assets panel, flagging raw inline formatting.

How to Use BrandGuard

Create a Rule Set: Open the plugin, go to the Overview tab, and create a named rule set.
Define Your Rules: In the Rules tab, add your specific constraints for colors, fonts, terminology, and layout. You can easily toggle individual rules on or off.
Run a Scan: Return to the Overview tab, select your rule set, and click Scan. The plugin checks your entire project in milliseconds.
Review and Fix: The Issues tab categorizes violations by severity (Error, Warning, Info). Click any issue card, and BrandGuard will automatically select and zoom to the problem layer on your canvas.

Free vs. Pro Plan

Free Plan:

1 Brand Rule Set
Up to 2 Color Rules
Up to 1 Font Rule
Up to 1 Terminology Rule
Maximum of 3 rules per scan
Does not include Spacing, Border Radius, or Text Style rules

Pro Plan (Permanent access)

Unlimited Brand Rule Sets
Unlimited Color Rules
Unlimited Font Rules
Unlimited Terminology Rules
Access to Spacing Rules
Access to Border Radius Rules
Access to Text Style Usage Rules
Unlimited Total Rules per Scan

Settings Tab

Use the Settings tab to enter your license key to activate Pro features (which will add a gold PRO badge to your plugin) or to check the current plugin version in the About section.

6f:Tdb2,

CMS Studio — Spreadsheet Editor for Framer CMS

Managing Framer CMS content item by item is slow. CMS Studio brings a full spreadsheet interface directly into your Framer plugin panel — so you can edit, bulk-update, audit, and publish your entire collection without ever leaving Framer.

How to Use

open it from the Framer plugin menu.
Select any CMS collection from the picker screen.
Your collection loads as a spreadsheet — every item is a row, every field is a column.
Double-click any cell to edit it inline. Edited cells are marked as drafts.
Use the toolbar to search, filter, sort, or run bulk operations.
When you're done, hit Publish to push all changes to Framer CMS at once.

Features

Inline Spreadsheet Editing

Double-click any cell to edit it directly in the grid
Edited cells show a draft indicator, so you always know what's pending
Read-only fields are visible but clearly locked

Bulk Operations

Select multiple rows and fill a field with the same value across all of them at once
Duplicate selected items with auto-generated unique slugs
Delete multiple items with a single confirmation

Find & Replace

Search across all text fields and slugs
Preview every match before applying
See a before/after diff for each replacement

Text Transforms

Apply UPPERCASE, lowercase, Title Case, Sentence case in bulk
Trim whitespace, or add a prefix/suffix to any string field
Preview all changes before committing

Slug Tools

Edit slugs inline directly from the grid
Auto-generate clean URL-safe slugs from any text field
Preview before/after for every slug that will change

Content Audit

See field completion rates with visual progress bars
Detect empty fields, duplicate slugs, invalid URLs, and duplicate content
Click any issue to jump straight to that item in the grid

Snapshots

Save a named snapshot of your collection before making big changes
Restore any snapshot as a draft and publish when ready
Stores up to 20 snapshots per session

Diff View

Review every pending change in a before/after list before you publish
Catch mistakes before they go live

CSV Import & Export

Export your full collection to CSV in one click
Import CSV back in — headers auto-map to field names

Search, Filter & Sort

Live search filters across all fields and slugs instantly
Sort any column ascending or descending

Column Visibility

Show or hide any field column from the grid
Keeps your workspace clean when working with large collections

Light & Dark Mode

Automatically adapts to Framer's native light or dark theme

70:T1d20,

About Conditional Show

Conditional Show is a Framer plugin that lets you control the visibility of any element on your canvas based on real-world conditions — without writing a single line of code. Show a banner only to mobile visitors. Hide a section outside business hours. Display a promotion exclusively to visitors from a specific country. Run time-limited campaigns that turn on and off automatically.

Every rule you create is deployed directly into your Framer project as lightweight custom code that runs instantly on the published site — no external services, no slowdowns, no third-party scripts tracking your visitors.

How It Works

Select an element on your Framer canvas.
Create a rule — choose Show or Hide, pick your conditions, set your values.
Deploy — click the Deploy button. The plugin writes optimised CSS and JavaScript directly into your project's custom code.
Publish your Framer site as usual. The rules run automatically for every visitor.

That's it. Your elements now respond to the real world.

17 Condition Types

Conditional Show supports 17 different conditions, giving you precise control over who sees what and when.

Link: Notion Guide to Understand every 17 Conditions in detail.

URL & Navigation

🔗 URL Parameter — Show/hide based on query string values like ?utm_source=google or ?plan=pro. Perfect for campaign-specific content, referral links, and personalised landing pages.
📄 Page Path — Target specific pages or sections of your site. Show a sidebar only on /blog, or hide a nav element only on /checkout.
#️⃣ URL Hash (#) — React to the hash fragment in the URL. Useful for one-page sites and anchor-based navigation.
🏠 Hostname — Show content only on your live domain and hide it on staging. Or show a staging warning banner only on staging.mysite.com.

Visitor & Device

📱 Device Type — Desktop, Tablet, or Mobile. Show a "Download our App" banner only to mobile visitors, or display a complex data table only on desktop.
🖥️ Screen Width — More precise than device type. Use pixel breakpoints like less than 768 for narrow screens or greater than 1280 for wide displays.
🌍 Country (Geo) — Target visitors by country using standard 2-letter codes (US, IN, GB, etc.). Show localised promotions, region-specific pricing, or compliance notices to the right audience.
🌐 Browser Language — Detect the visitor's preferred language (en, fr, de, etc.). Show a language switcher banner only when their browser is set to a non-English language.
👤 New / Returning Visitor — Distinguish first-time visitors from returning ones. Show a welcome discount to new visitors or a "What's new" section to returning users.

Time & Date

🕐 Hour of Day — Show or hide content based on the current hour (0–23) in the visitor's local timezone. Ideal for business hours banners, live chat availability, or time-sensitive offers.
⏰ Time Range — Precise time-based targeting with minute-level accuracy. Show a "Happy Hour" promotion between 16:00 and 19:00 exactly.
📅 Day of Week — Target specific days or ranges. Show a weekend sale only on Saturday and Sunday, or display business hours only on weekdays.
🗓️ Date Range — Perfect for campaigns with hard start and end dates. A Black Friday banner that only appears November 29–December 2. A Christmas offer that disappears on December 27.
📆 Month — Seasonal content made easy. Show a Summer Collection in June–August, or a Year-End Review section only in December.

Browser Data

🍪 Cookie Value — Read browser cookies to show content based on login status, user tier, A/B test group, or any value your site stores. Show an "Upgrade to Pro" banner only to logged-in free-plan users.
💾 Local Storage — Read localStorage values set by your app. Show an onboarding tooltip only to users who haven't completed setup, or display a feature only to users who have opted in.
↩️ Referral Source — Show a personalised welcome message to visitors arriving from LinkedIn, a custom landing message for Google Ads traffic, or a special offer for visitors from a partner site.

Combining Conditions

Every rule can have multiple conditions. You choose how they combine:

All conditions (AND) — every condition must be true. Example: Country is US AND Device is Mobile.
Any condition (OR) — at least one must be true. Example: Referrer contains google OR URL Parameter utm_source equals google.

This lets you build highly targeted rules without needing separate rules for each scenario.

Preview Simulator (Pro)

Before publishing, test how your rules will behave under any scenario. The Preview Simulator lets you set a fake environment — device, country, time, page path, URL parameters, cookies, and more — and instantly see which elements would be visible or hidden, without publishing or visiting your live site.

Free vs Pro

Free — always free

6 condition types: URL Parameter, Page Path, Device Type, URL Hash, Referral Source, and Hour of Day
Up to 2 rules per project

Pro — $49 one-time, lifetime access

All 17 condition types, including Geo Country, Cookies, Local Storage, Date Range, Time Range, Day of Week, Month, Browser Language, New/Returning Visitor, and Regex matching
Unlimited rules + Preview Simulator to test rules before publishing

Pro is a one-time purchase — no subscriptions, no renewals, lifetime access.

Built for Framer. Nothing extra required.

No third-party tracking scripts added to your site
Rules compile to pure, minified CSS + JavaScript injected directly into Framer's custom code slots
Works with Framer's SPA navigation — rules re-evaluate on every page change automatically
Fully compatible with both light and dark mode in the Framer editor

Support

For questions, bug reports, or feature requests, contact: info.evixel@gmail.com

60:["$","$L61",null,{"value":{"fallback":{"$inf$activity-creator-f4924de8-9236-488c-918b-7df9feddcf59-all:/unified/creator/f4924de8-9236-488c-918b-7df9feddcf59/activity/":[{"data":[{"id":"019fa46d-ffe2-70cf-a4a9-eaf338233077","type":"comment.reply","target":{"type":"post","id":"019c29aa-2d7d-7741-89d0-3b47a7180d86","preview":"Quote Flow","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4924de8-9236-488c-918b-7df9feddcf59/01a0b677-20da-7346-9ea4-5ebf547eb9d6.png","targetDeleted":false,"owned":true,"actions":{"postId":"019c29aa-2d7d-7741-89d0-3b47a7180d86","like":{"count":9,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019fa46d-ff84-7108-ba65-93654f4d7621","preview":"Hi Steph,\nI'll try to implement this feature if it's possible. Thanks for the suggestion!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hi Steph,"}]},{"type":"paragraph","content":[{"type":"text","text":"I'll try to implement this feature if it's possible. Thanks for the suggestion!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019c29aa-2d7d-7741-89d0-3b47a7180d86","like":{"count":0,"liked":false},"reply":{"parentCommentId":"019fa02a-1bab-752b-8abd-248d7845c3ba"},"repost":null}},"actors":[{"id":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","slug":"evixelstudio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-27T16:35:00.194Z","latestAt":"2026-07-27T16:35:00.194Z"},{"id":"019f1a67-2520-7618-8732-c877886c4a9c","type":"creator.followed","target":{"type":"creator","id":"dff3b05c-02d0-4ed8-a095-26a214570759","preview":"Joseph Todaro","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/dff3b05c-02d0-4ed8-a095-26a214570759/krr0ac8j","slug":"jatodaro","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","slug":"evixelstudio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-30T21:19:55.164Z","latestAt":"2026-06-30T21:19:55.164Z"},{"id":"019f08ad-047a-71ad-83a0-57619714fe39","type":"component.created","target":{"type":"component","id":"MbJshJXQ3Rs6BDPevCPB","preview":"3D Drape Text","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4924de8-9236-488c-918b-7df9feddcf59/01a0b66f-8c54-778e-adb7-df5056e6c31a.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","slug":"evixelstudio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-06-27T10:43:04.442Z","latestAt":"2026-06-27T10:43:04.442Z"},{"id":"019f052c-8046-769f-a6ef-596267b2996d","type":"component.created","target":{"type":"component","id":"St9vNip4ZSpo1rKSiQJP","preview":"Mosaic Reveal 3D","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4924de8-9236-488c-918b-7df9feddcf59/01a0b671-bb78-709a-a390-73e7e397eac7.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","slug":"evixelstudio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-06-26T18:23:50.342Z","latestAt":"2026-06-26T18:23:50.342Z"},{"id":"019eda83-3ef8-756b-a413-4044f02156fa","type":"creator.followed","target":{"type":"creator","id":"11d8da97-fe40-4d7b-a259-7f3794afeac4","preview":"Jorn van Dijk","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/29589/cqFVF7952-l2jqnGwomkIsBoDtYdLMJIesrijJId","slug":"jornvandijk","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","slug":"evixelstudio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-18T11:34:54.963Z","latestAt":"2026-06-18T11:34:54.963Z"},{"id":"019eda83-2cde-70ec-9606-ae3c2490acb0","type":"creator.followed","target":{"type":"creator","id":"a7cd9fe6-cf81-4a41-8e93-bca0291dba80","preview":"Framer","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/107446/xpZr8yYS_400x400-2-MqZMjb2zlessnXickTqkyAzkfqz6le.jpg","slug":"framer","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","slug":"evixelstudio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-18T11:34:50.329Z","latestAt":"2026-06-18T11:34:50.329Z"},{"id":"019ed1a1-349a-72d9-a4d6-1231c3dfe225","type":"creator.followed","target":{"type":"creator","id":"7adbc810-fb6d-488b-86fe-e018224298a7","preview":"Justyna Dabrowska","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/109764/avatar-Rk9bE59QhfA1V9LITQIq4Nk8F5ENov.jpg","slug":"justyna","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","slug":"evixelstudio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-16T18:11:03.446Z","latestAt":"2026-06-16T18:11:03.446Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:f4924de8-9236-488c-918b-7df9feddcf59:/unified/posts/?creator=f4924de8-9236-488c-918b-7df9feddcf59&with=reposts":[{"data":[{"id":"019f08ad-041f-7254-a777-8ce791c01331","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"MbJshJXQ3Rs6BDPevCPB","resolved":true,"title":"3D Drape Text","body":"$62","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Bring your website to life with a realistic, interactive 3D cloth simulation. Grab, drag, and drape dynamic fabric carrying your custom typography or brand imagery in real time—powered by Three.js and Verlet physics with zero external 3D models required."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive Physics:","marks":[{"type":"bold"}]},{"type":"text","text":" Grab and pull the fabric with mouse or touch, complete with realistic wind ripples and gravity. "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom Text & Images:","marks":[{"type":"bold"}]},{"type":"text","text":" Write multi-line titles or apply your own custom textures and background graphics."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom Pinning Modes:","marks":[{"type":"bold"}]},{"type":"text","text":" Pin the cloth along the left, right, top edges, corners, or let it free-fall into view."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"PBR Material Tuning:","marks":[{"type":"bold"}]},{"type":"text","text":" Fine-tune surface roughness, metalness, shadows, and lighting for silk, cotton, or metallic sheet looks."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Production-Ready Performance:","marks":[{"type":"bold"}]},{"type":"text","text":" Responsive layout support, smooth frame rates, and automatic static fallback for search engines."}]},{"type":"customHeading","content":[{"type":"text","text":"Property Controls","marks":[{"type":"bold"}]}],"attrs":{"level":2}}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text:","marks":[{"type":"bold"}]},{"type":"text","text":" Multi-line text input with full font customization (font family, weight, size, letter spacing, and color). "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Appearance:","marks":[{"type":"bold"}]},{"type":"text","text":" Switch between Solid Color and Custom Image, with direct control over cloth Roughness and Metalness."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Simulation:","marks":[{"type":"bold"}]},{"type":"text","text":" Adjust Wind Strength, Gravity, and Fabric Stiffness to simulate everything from stiff leather to lightweight silk."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pinning:","marks":[{"type":"bold"}]},{"type":"text","text":" Choose how the fabric hangs: Top Edge, Left Edge, Right Edge, Top + Left, Top + Right, or Free Falling."}]},{"type":"customHeading","content":[{"type":"text","text":"Quick Start Guide","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag and drop the component anywhere onto your Framer canvas."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set your desired dimensions (or set width and height to 100% / Fill)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Type your text or toggle background to upload a custom image."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Select your preferred pinning style and preview the live simulation!"}]}]}],"attrs":{"type":null,"start":1}}]}]}]},"introduction":"Realistic 3D fabric typography","slug":"3d-drape-text","author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4924de8-9236-488c-918b-7df9feddcf59/01a0b66f-8c54-778e-adb7-df5056e6c31a.png","metadata":{"tint":{"h":0,"s":53,"l":66},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-06-27T10:43:04.319Z","updatedAt":"2026-09-19T10:52:38.708Z","publishedAt":"2026-06-27T10:43:04.316Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://shiny-someone-979380.framer.app","price":"7","paymentUrl":"https://evixelstudio.gumroad.com/l/DrapeText","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"YNd8yACVGcNLW1INgiXa","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-27T10:43:04.351Z","updatedAt":"2026-06-27T10:43:04.351Z"},{"id":"019f052c-8017-72ae-a0a0-b5b73c570f1f","title":null,"body":"

Mosaic Image Reveal is here! Turn any image into a stunning 3D tile animation with 6 reveal styles, 8 stagger patterns, scroll triggers, cursor parallax, and fully customizable motion. Perfect for making your next Framer project stand out.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Mosaic Image Reveal is here! Turn any image into a stunning 3D tile animation with 6 reveal styles, 8 stagger patterns, scroll triggers, cursor parallax, and fully customizable motion. Perfect for making your next Framer project stand out."}]}]},"author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"St9vNip4ZSpo1rKSiQJP","resolved":true,"title":"Mosaic Reveal 3D","body":"$63","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Transform static images into cinematic 3D visual experiences. Mosaic Image Reveal slices any image into a customizable grid and animates it into view with fluid perspective transitions, reactive cursor tilt, and spring physics—all without third-party 3D libraries or heavy assets."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"9 Cinematic 3D Styles:","marks":[{"type":"bold"}]},{"type":"text","text":" Choose from Explode, Vortex, Flip 3D, Blinds, Fold, Depth Zoom, Rise, Drop, and Shuffle."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"13 Reveal Patterns:","marks":[{"type":"bold"}]},{"type":"text","text":" Animate tiles sequentially with Center Out, Spiral, Wave, Snake, Checkerboard, Diagonal, and more."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive Cursor Parallax:","marks":[{"type":"bold"}]},{"type":"text","text":" Silky-smooth 3D tilt tracking that reacts to mouse movement, plus optional hover lift."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Versatile Triggers:","marks":[{"type":"bold"}]},{"type":"text","text":" Trigger automatically on scroll, on page load, or make it interactive via hover or click."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-In Gradient Overlays:","marks":[{"type":"bold"}]},{"type":"text","text":" Add linear or radial gradient overlays with 16 CSS blend modes for instant color grading."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Performance & Accessibility:","marks":[{"type":"bold"}]},{"type":"text","text":" Fully responsive, zero external 3D runtime overhead, and automatic graceful fallback for reduced motion preferences."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Property Controls","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Layout & Grid:","marks":[{"type":"bold"}]},{"type":"text","text":" Configure aspect ratios (Intrinsic Image, 16:9, 1:1, custom), row and column counts, gaps, tile radii, and overflow clipping."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reveal:","marks":[{"type":"bold"}]},{"type":"text","text":" Select animation patterns, sequence spread time, delay, trigger threshold, and replay settings."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"3D Motion:","marks":[{"type":"bold"}]},{"type":"text","text":" Dial in perspective depth, scatter travel, 3D rotation angle, starting scale, and spring physics."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interaction:","marks":[{"type":"bold"}]},{"type":"text","text":" Toggle cursor tilt, customize tilt strength, invert direction, and set hover lift distance."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Overlay:","marks":[{"type":"bold"}]},{"type":"text","text":" Customize linear or radial gradients, angles, colors, opacity, and mix blend modes."}]},{"type":"customHeading","content":[{"type":"text","text":"Quick Start Guide","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag and drop the component onto your Framer canvas."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Upload your image (or keep the default placeholder)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pick your preferred 3D Style (e.g. Explode or Vortex) and Reveal Pattern."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set the trigger to "},{"type":"text","text":"In View","marks":[{"type":"bold"}]},{"type":"text","text":" or "},{"type":"text","text":"Hover","marks":[{"type":"bold"}]},{"type":"text","text":", and preview the live animation!"}]}]}],"attrs":{"type":null,"start":1}}]}]}]},"introduction":"Dynamic 3D mosaic image reveals","slug":"mosaic-reveal-3d","author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4924de8-9236-488c-918b-7df9feddcf59/01a0b671-bb78-709a-a390-73e7e397eac7.png","metadata":{"tint":{"h":210,"s":82,"l":60},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-06-26T18:23:50.241Z","updatedAt":"2026-09-19T11:08:09.114Z","publishedAt":"2026-06-26T18:23:50.238Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://generous-sheet-144680.framer.app","price":"7","paymentUrl":"https://evixelstudio.gumroad.com/l/MosaicImage","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"bg1zyAQoNCFXuHLLRSHy","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-06-27T01:27:37.262Z","createdAt":"2026-06-26T18:23:50.295Z","updatedAt":"2026-06-27T01:27:37.262Z"},{"id":"019edae1-2bf4-74fc-bf6c-0952b6ecd4b4","title":null,"body":"

🌍 Instantly translate your text into 240+ languages with beautiful animated transitions.

No API keys. No setup. Just drop it into your Framer project and reach a global audience in seconds.

✨ Fast ✨ Easy to use ✨ Powered by Google Translate

👉 https://www.framer.com/community/marketplace/components/translate-flow/

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"earth_africa","emoji":"🌍"}},{"type":"text","text":" Instantly translate your text into 240+ languages with beautiful animated transitions."}]},{"type":"paragraph","content":[{"type":"text","text":"No API keys. No setup. Just drop it into your Framer project and reach a global audience in seconds."}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}},{"type":"text","text":" Fast "},{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}},{"type":"text","text":" Easy to use "},{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}},{"type":"text","text":" Powered by Google Translate"}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"point_right","emoji":"👉"}},{"type":"text","text":" "},{"type":"text","text":"https://www.framer.com/community/marketplace/components/translate-flow/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.framer.com/community/marketplace/components/translate-flow/","target":"_blank"}}]}]}]},"author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-18T13:17:30.488Z","updatedAt":"2026-06-18T13:17:30.488Z"},{"id":"019ed6a0-70a5-7251-893f-aff31a0ca780","title":null,"body":"

Built a landing page for "Void" — a dark-themed AI coding agent site with an animated hero, feature grid, pricing, and scroll animations.

All done using Framer Agents for the $100K hackathon.

Check it out 👇

https://likely-desktop-720320.framer.app/

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built a landing page for \"Void\" — a dark-themed AI coding agent site with an animated hero, feature grid, pricing, and scroll animations."}]},{"type":"paragraph","content":[{"type":"text","text":"All done using Framer Agents for the $100K hackathon."}]},{"type":"paragraph","content":[{"type":"text","text":"Check it out "},{"type":"emoji","attrs":{"name":"point_down","emoji":"👇"}}]},{"type":"paragraph","content":[{"type":"text","text":"https://likely-desktop-720320.framer.app/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://likely-desktop-720320.framer.app/","target":"_blank"}}]}]}]},"author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[],"resources":[],"contests":[{"id":"019ed6a0-70a5-7251-893f-b0cfcc3a6143","contestId":"agents-hackathon","author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg"},"title":"Void - AI coding","body":"

Void — AI Coding Agent Landing Page

Void is a dark-themed landing page for a local-first AI coding agent built for terminal power users. Clean, fast, and minimal — designed to speak directly to developers.

The page features a full-viewport hero with an animated gradient, an infinite logo marquee, a feature grid, a 3-tier pricing section, developer testimonials, and a bold CTA — all tied together with scroll-triggered animations and a parallax effect.

Built on a near-black foundation with an electric lime accent, Geist Mono headings, and crisp responsive layouts across mobile, tablet, and desktop.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Void — AI Coding Agent Landing Page","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Void is a dark-themed landing page for a local-first AI coding agent built for terminal power users. Clean, fast, and minimal — designed to speak directly to developers."}]},{"type":"paragraph","content":[{"type":"text","text":"The page features a full-viewport hero with an animated gradient, an infinite logo marquee, a feature grid, a 3-tier pricing section, developer testimonials, and a bold CTA — all tied together with scroll-triggered animations and a parallax effect."}]},{"type":"paragraph","content":[{"type":"text","text":"Built on a near-black foundation with an electric lime accent, Geist Mono headings, and crisp responsive layouts across mobile, tablet, and desktop."}]}]},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4924de8-9236-488c-918b-7df9feddcf59/mxd6i1fn","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1120,"height":748}}],"post":null,"data":{"previewUrl":"https://likely-desktop-720320.framer.app/"},"winner":false,"createdAt":"2026-06-17T17:28:19.409Z","updatedAt":"2026-06-17T17:28:19.409Z"}],"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-06-17T17:28:19.371Z","updatedAt":"2026-06-17T17:28:19.371Z"},{"id":"019ed603-b3ad-70fe-8d68-ea50d2042ede","title":null,"body":"

✨ Turn plain text into a mesmerizing 3D ribbon animation.

RibbonFlow wraps your text into a continuous looping ribbon with smooth 60fps motion, fully customizable and ready for hero sections, portfolios, and landing pages.

For just $5, it's an easy way to make your typography stand out.

👉 https://www.framer.com/community/marketplace/components/ribbonflow-3d-text/

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}},{"type":"text","text":" Turn plain text into a mesmerizing 3D ribbon animation."}]},{"type":"paragraph","content":[{"type":"text","text":"RibbonFlow wraps your text into a continuous looping ribbon with smooth 60fps motion, fully customizable and ready for hero sections, portfolios, and landing pages."}]},{"type":"paragraph","content":[{"type":"text","text":"For just $5, it's an easy way to make your typography stand out."}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"point_right","emoji":"👉"}},{"type":"text","text":" "},{"type":"text","text":"https://www.framer.com/community/marketplace/components/ribbonflow-3d-text/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.framer.com/community/marketplace/components/ribbonflow-3d-text/","target":"_blank"}}]}]}]},"author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/gU02hOnhYLMTwm0102lp4EynKJNrBvtGyP015aU6mV6gMmo.m3u8","metadata":{"posterUrl":"https://image.mux.com/gU02hOnhYLMTwm0102lp4EynKJNrBvtGyP015aU6mV6gMmo/thumbnail.webp?time=6.883","aspectRatio":"1:1","duration":10.316667}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-17T14:37:07.390Z","updatedAt":"2026-06-17T14:37:07.390Z"},{"id":"019ed601-f35f-7698-9879-db612edd776e","title":null,"body":"

⛰ Bring your Framer website to life with animated topographic contour lines.

Smooth SVG rendering, interactive mouse effects, customizable terrain patterns, and beautiful gradient modes—all in one lightweight component. Perfect for hero sections and premium landing pages. ✨

👉 https://www.framer.com/community/marketplace/components/topographic-contour/

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"mountain","emoji":"⛰"}},{"type":"text","text":" Bring your Framer website to life with animated topographic contour lines."}]},{"type":"paragraph","content":[{"type":"text","text":"Smooth SVG rendering, interactive mouse effects, customizable terrain patterns, and beautiful gradient modes—all in one lightweight component. Perfect for hero sections and premium landing pages. "},{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"point_right","emoji":"👉"}},{"type":"text","text":" "},{"type":"text","text":"https://www.framer.com/community/marketplace/components/topographic-contour/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.framer.com/community/marketplace/components/topographic-contour/","target":"_blank"}}]}]}]},"author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-17T14:35:12.611Z","updatedAt":"2026-06-17T14:35:12.611Z"},{"id":"019ed19d-52d8-75c0-a298-27c18f5b0a93","title":null,"body":"

Knock Knock, Evixel Studio is here 👀

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Knock Knock, Evixel Studio is here "},{"type":"emoji","attrs":{"name":"eyes","emoji":"👀"}}]}]},"author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-16T18:06:49.051Z","updatedAt":"2026-06-16T18:06:49.051Z"},{"id":"019e98af-76c6-74b0-82ab-9cf04712d264","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"VvcFzMJBHifi0ovoKRI2","resolved":true,"title":"Type Mask","body":"$64","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Transform standard copy into dynamic visual windows. Media Portal Text masks media directly inside words using text clipping. On hover, tap, or scroll, words reveal high-resolution imagery with spring physics, cursor parallax, and 3D tilt while surrounding text dims for maximum focus."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Inline Bracket Syntax:","marks":[{"type":"bold"}]},{"type":"text","text":" Wrap words in "},{"type":"text","text":"[brackets]","marks":[{"type":"code"}]},{"type":"text","text":" to turn them into media portals. Use "},{"type":"text","text":"[word](2)","marks":[{"type":"code"}]},{"type":"text","text":" to map directly to portal slot #2."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive 3D Motion:","marks":[{"type":"bold"}]},{"type":"text","text":" Responsive cursor parallax, 3D tilt, hover scale pop, and internal image zoom."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Surrounding Focus:","marks":[{"type":"bold"}]},{"type":"text","text":" Automatically dims and blurs non-active text to highlight the active visual."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multiple Trigger Modes:","marks":[{"type":"bold"}]},{"type":"text","text":" Trigger via Hover, Click/Tap, Scroll In-View (with stagger), or keep Always Visible."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Links & Navigation:","marks":[{"type":"bold"}]},{"type":"text","text":" Attach internal or external URLs to any portal with new-tab options."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom Underlines:","marks":[{"type":"bold"}]},{"type":"text","text":" Solid, dashed, dotted, or double indicators that can auto-hide when revealed."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Touch & Mobile Ready:","marks":[{"type":"bold"}]},{"type":"text","text":" Tap once to reveal; tap again to navigate. Includes preloading to avoid loading flashes."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Property Controls"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text & Portals:","marks":[{"type":"bold"}]},{"type":"text","text":" Full typography styling, bracketed text input, and media/link assignment per slot. "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reveal:","marks":[{"type":"bold"}]},{"type":"text","text":" Choose trigger mode, duration, background dim opacity, blur amount, and in-view stagger timing. "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Motion:","marks":[{"type":"bold"}]},{"type":"text","text":" Adjust image zoom %, parallax intensity/direction, 3D tilt angle, hover scale, and spring stiffness/damping."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Underline:","marks":[{"type":"bold"}]},{"type":"text","text":" Set line style, color, em-based thickness, vertical offset, and reveal behavior."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Behavior:","marks":[{"type":"bold"}]},{"type":"text","text":" Cursor type, text selection toggle, and lazy vs. preload settings."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Quick Start Guide"}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop the component onto your Framer canvas."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Enter your copy in "},{"type":"text","text":"Text","marks":[{"type":"bold"}]},{"type":"text","text":": "},{"type":"text","text":"Explore our [work] and meet the [team].","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add images to the "},{"type":"text","text":"Portals","marks":[{"type":"bold"}]},{"type":"text","text":" list (matches brackets sequentially)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customize your typography, hover colors, and spring effects!"}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"Reveal media inside text on hover","slug":"type-mask","author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4924de8-9236-488c-918b-7df9feddcf59/01a0b672-7363-734b-8718-c91b980f057f.png","metadata":{"tint":{"h":225,"s":27,"l":27},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-06-05T12:12:39.026Z","updatedAt":"2026-09-19T11:18:26.528Z","publishedAt":"2026-06-05T16:48:16.582Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://pleasant-answers-952185.framer.app","price":"5","paymentUrl":"https://evixelstudio.gumroad.com/l/TypeMask","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"KDL8s02a2GcJEQa42Ied","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-05T16:48:16.582Z","updatedAt":"2026-06-05T16:48:16.582Z"},{"id":"019e64d9-90f1-71e5-8616-9910d4c6d024","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"BRSAEgqLh2KqFnouSJoP","resolved":true,"title":"GalleryTide","body":"$65","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Showcase your projects, products, or portfolios with a fluid, continuous 3D carousel. Liquid Ribbon Carousel projects cards along an undulating 3D sine wave, arc, or flat ribbon. Complete with physics-based drag inertia, interactive cursor spotlighting, card tilt, and automatic infinite looping."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"3D Wave Trajectories:","marks":[{"type":"bold"}]},{"type":"text","text":" Flow cards along customizable Sine, Arc, or Flat paths with adjustable amplitude, roll, frequency, and 3D twist."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Seamless Ribbon Stitching:","marks":[{"type":"bold"}]},{"type":"text","text":" Use negative gaps to overlap cards into a continuous, unbroken visual strip."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fluid Physics & Controls:","marks":[{"type":"bold"}]},{"type":"text","text":" Smooth drag inertia with friction tuning, trackpad wheel scrolling, keyboard navigation, and card snapping."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive Hover Effects:","marks":[{"type":"bold"}]},{"type":"text","text":" Dynamic radial spotlight illumination, 3D card tilt, and subtle image zoom on hover."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Atmospheric Depth:","marks":[{"type":"bold"}]},{"type":"text","text":" Background cards gracefully fade, shrink, and blur based on 3D distance and camera perspective."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive & Infinite:","marks":[{"type":"bold"}]},{"type":"text","text":" Virtual card replication ensures continuous, smooth infinite loops across all screen sizes."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Property Controls"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Items:","marks":[{"type":"bold"}]},{"type":"text","text":" Add unlimited cards with custom responsive images, titles, subtitles, and click-through links."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Layout & Wave:","marks":[{"type":"bold"}]},{"type":"text","text":" Tune card width/height, overlap gap, perspective, wave shape (Ribbon/Arc/Flat), amplitude, depth, and twist angles."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Motion:","marks":[{"type":"bold"}]},{"type":"text","text":" Adjust autoplay speed, scroll direction, pause-on-hover delay, momentum friction, and snap-to-card."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interaction:","marks":[{"type":"bold"}]},{"type":"text","text":" Toggle drag, trackpad, arrow keys, click-to-center, card tilt intensity, and radial spotlight glow."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text & Arrows:","marks":[{"type":"bold"}]},{"type":"text","text":" Full typography styling, gradient scrim overlays, and optional floating navigation arrows."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Quick Start Guide"}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag the component onto your Framer canvas."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add your items under the "},{"type":"text","text":"Items","marks":[{"type":"bold"}]},{"type":"text","text":" control list."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose your path shape in "},{"type":"text","text":"Wave","marks":[{"type":"bold"}]},{"type":"text","text":" (e.g. Ribbon or Arc)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customize your typography, colors, and preview the live motion!"}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"Fluid 3D ribbon card carousel","slug":"gallerytide","author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4924de8-9236-488c-918b-7df9feddcf59/01a0b673-058d-749c-bf00-53251f340a9c.png","metadata":{"tint":{"h":240,"s":53,"l":70},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-05-23T13:10:00.444Z","updatedAt":"2026-09-19T11:22:38.347Z","publishedAt":"2026-05-26T15:14:00.561Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://odd-founders-290963.framer.app","price":"5","paymentUrl":"https://evixelstudio.gumroad.com/l/GalleryTide","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"6tzStfL2vvzEj2TO5gEW","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-05-26T15:14:00.561Z","updatedAt":"2026-05-26T15:14:00.561Z"},{"id":"019e64d9-6f63-7629-8947-a41b69cf1380","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"qgIH2jmXk1IGE9w0De44","resolved":true,"title":"RibbonFlow 3D Text","body":"$66","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Create eye-catching, continuous 3D kinetic typography. Kinetic Circular Ribbon projects dynamic copy around a twisted torus ring using high-performance 2D Canvas rendering—delivering rich 3D perspective, depth gradients, and physics interactions with zero external 3D library overhead."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"3D Torus Geometry:","marks":[{"type":"bold"}]},{"type":"text","text":" Wrap text around a 3D ring with fine control over size, thickness, ribbon twist count, perspective, and X/Y tilts."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Versatile Motion Triggers:","marks":[{"type":"bold"}]},{"type":"text","text":" Spin continuously, scrub with page scroll, trigger when in view, or combine auto-spin with scroll velocity."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Depth Shading & Glow:","marks":[{"type":"bold"}]},{"type":"text","text":" Realistic perspective letter scaling, depth-aware opacity fade, near/far dual-color gradients, and optional neon glow."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive Drag & Inertia:","marks":[{"type":"bold"}]},{"type":"text","text":" Grab and spin with smooth momentum friction, with hover reactions to pause, slow down, speed up, or reverse."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smart Typography:","marks":[{"type":"bold"}]},{"type":"text","text":" Supports single phrases or item lists with separators, text casing, natural or even glyph spacing, and an automatic \"Fit to Ring\" mode."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ultra Lightweight:","marks":[{"type":"bold"}]},{"type":"text","text":" Pure Canvas-driven 3D math provides silky 60fps performance without Three.js or heavy dependencies."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Property Controls"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Content & Letters:","marks":[{"type":"bold"}]},{"type":"text","text":" Single string or item lists, repeats, casing, natural/even glyph spacing, and auto-fit scaling."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ribbon Shape:","marks":[{"type":"bold"}]},{"type":"text","text":" Adjust outer size, ring thickness, twist count, X/Y tilt angles, perspective depth, and rotation."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Colors & Depth:","marks":[{"type":"bold"}]},{"type":"text","text":" Solid or depth-blended color palettes, minimum far opacity/scale, and custom glow radius and color."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation:","marks":[{"type":"bold"}]},{"type":"text","text":" Triggers (Always, In View, Scroll, Auto+Scroll), speed, scroll smoothing, direction, and reduced motion fallback."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interaction:","marks":[{"type":"bold"}]},{"type":"text","text":" Drag-to-spin sensitivity, momentum inertia, and hover reactions (pause, slow down, speed up, reverse)."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Quick Start Guide"}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop the component onto your Framer canvas."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Enter your copy or list items in the "},{"type":"text","text":"Content","marks":[{"type":"bold"}]},{"type":"text","text":" panel."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tweak the "},{"type":"text","text":"Ribbon","marks":[{"type":"bold"}]},{"type":"text","text":" twist, tilt, and size to match your layout."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Select an "},{"type":"text","text":"Animation","marks":[{"type":"bold"}]},{"type":"text","text":" trigger (e.g. Always or On Scroll) and preview!"}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"Kinetic 3D circular text ribbon","slug":"ribbonflow-3d-text","author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4924de8-9236-488c-918b-7df9feddcf59/01a0b673-76a7-72ee-a4ff-393d9db89fca.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-05-17T16:46:03.755Z","updatedAt":"2026-09-19T11:25:17.312Z","publishedAt":"2026-05-26T15:13:51.971Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://massive-osprey-300541.framer.app","price":"5","paymentUrl":"https://evixelstudio.gumroad.com/l/RibbonFlow3D","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"IUfm0T6GyBHLkdypUAlu","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-26T15:13:51.971Z","updatedAt":"2026-05-26T15:13:51.971Z"},{"id":"019e64d8-6c54-773f-9a01-e68aa85e58a5","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Qa0lXRuBt3IDW8cj8hBb","resolved":true,"title":"Kinetic Ribbon Text","body":"$67","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Create striking, continuous 3D kinetic typography for hero sections, badges, and headers. Kinetic Ribbon bends live text along a 3D cylindrical ring using CSS 3D transforms and Framer Motion—delivering fluid 60fps rotation, scroll interaction, and momentum drag with zero 3D canvas overhead."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"True 3D Ring Geometry:","marks":[{"type":"bold"}]},{"type":"text","text":" Position text in 3D space with 3-axis tilts (X, Y, Z), perspective control, inward/outward facing, sine wave undulation, and Möbius-style ribbon twists."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dual Motion Drivers:","marks":[{"type":"bold"}]},{"type":"text","text":" Combine smooth continuous auto-spin with scroll-scrubbed rotation, stabilized by critically damped spring physics."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive Drag & Flick:","marks":[{"type":"bold"}]},{"type":"text","text":" Grab and spin the ring with touch or mouse, featuring realistic inertia momentum and hover reactions (pause, reverse, or speed up)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Depth Fade & Scaling:","marks":[{"type":"bold"}]},{"type":"text","text":" Automatically dims and scales background letters as they curve away from the camera for realistic depth without expensive filters."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smart Auto-Fill:","marks":[{"type":"bold"}]},{"type":"text","text":" Intelligently calculates glyph counts to wrap the ring radius perfectly, or set manual repeats and density."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ultra Lightweight:","marks":[{"type":"bold"}]},{"type":"text","text":" Built with pure CSS transforms and Framer Motion for instant page loads and zero external 3D library dependencies."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Property Controls"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Content:","marks":[{"type":"bold"}]},{"type":"text","text":" Single text string or custom word lists with individual colors, separators, letter casing, and auto/manual density."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Typography:","marks":[{"type":"bold"}]},{"type":"text","text":" Full web font customization, size, letter spacing, line height, and multi-layer neon glow."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"3D Ring:","marks":[{"type":"bold"}]},{"type":"text","text":" Radius, perspective, 3-axis tilts, facing direction, wave height/cycles, twist, and backface culling."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation & Depth:","marks":[{"type":"bold"}]},{"type":"text","text":" Auto-spin speed, scroll speed factor, spring smoothing, distance-based opacity/scale fade, and in-view triggers."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interaction:","marks":[{"type":"bold"}]},{"type":"text","text":" Drag-to-spin toggle, drag sensitivity, inertia friction, and hover states."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Quick Start Guide"}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop the component onto your Framer canvas."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Enter your copy or word list in the "},{"type":"text","text":"Content","marks":[{"type":"bold"}]},{"type":"text","text":" panel."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust the "},{"type":"text","text":"Radius","marks":[{"type":"bold"}]},{"type":"text","text":" and "},{"type":"text","text":"Tilt","marks":[{"type":"bold"}]},{"type":"text","text":" in the 3D Ring settings."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose an animation mode (Auto Spin, Scroll, or Both) and preview!"}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"Kinetic 3D circular text ribbon","slug":"kinetic-ribbon-text","author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4924de8-9236-488c-918b-7df9feddcf59/01a0b673-ea70-72b1-b527-58b3d220ca9c.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-05-16T19:25:30.101Z","updatedAt":"2026-09-19T11:27:28.834Z","publishedAt":"2026-05-26T15:12:45.652Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://elegant-statuses-710180.framer.app","price":"5","paymentUrl":"https://evixelstudio.gumroad.com/l/KineticRibbon","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"H1KhKx3SmqAQgfrZHCkJ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-26T15:12:45.652Z","updatedAt":"2026-05-26T15:12:45.652Z"},{"id":"019dd1ff-1913-75ab-b9b9-9be0176ed703","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"VMoMEJ7COCi7cctxXrL0","resolved":true,"title":"Liquid Image FX","body":"$68","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Add fluid, organic distortion and ripple effects to your graphics. Liquid Distortion uses hardware-accelerated SVG displacement mapping and procedural turbulence to melt, ripple, and swirl visuals on hover, click, or scroll—delivering rich interactive fluid motion without heavy WebGL or external 3D libraries."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"7 Distortion Modes:","marks":[{"type":"bold"}]},{"type":"text","text":" Switch between Heat Haze, Liquid, Ripple, Swirl, Melting, Wave, and digital Glitch effects."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dual-Image Morph:","marks":[{"type":"bold"}]},{"type":"text","text":" Seamlessly crossfade and dissolve between two images during interaction transitions."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Chromatic Aberration:","marks":[{"type":"bold"}]},{"type":"text","text":" Directional RGB color splitting that dynamically separates channels along the distortion angle."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic Interaction:","marks":[{"type":"bold"}]},{"type":"text","text":" Cursor-following fluid center, click shockwave impulses (\"Wave Pop\"), and scroll velocity/progress drivers."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Edge Protection:","marks":[{"type":"bold"}]},{"type":"text","text":" Built-in overscan compensation prevents seam gaps and transparent borders when clipping."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Performance Optimized:","marks":[{"type":"bold"}]},{"type":"text","text":" Direct DOM updates without React re-render overhead, selectable FPS caps (30/60/auto), and automatic filter sleep when idle."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Property Controls"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Media:","marks":[{"type":"bold"}]},{"type":"text","text":" Primary image, optional secondary morph image, alt text, and fit mode (Cover or Contain)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Distortion:","marks":[{"type":"bold"}]},{"type":"text","text":" Mode selection, intensity, wave speed, flow angle, complexity octaves, and RGB split distance."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interaction:","marks":[{"type":"bold"}]},{"type":"text","text":" Trigger type (Hover, Scroll, Click, Always), cursor follow %, click shockwave impulse, and fade in/out duration."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll Config:","marks":[{"type":"bold"}]},{"type":"text","text":" Choose between scroll velocity or progress modes with custom sensitivity and scroll ranges."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Appearance & Advanced:","marks":[{"type":"bold"}]},{"type":"text","text":" Border radius, box shadow, color tint with blend modes, edge clipping vs. bleed, and FPS limiting."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Quick Start Guide"}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop the component onto your canvas and set your dimensions."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Upload a primary image (and an optional secondary image for hover morphing)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose a distortion mode (e.g. Liquid or Ripple) and trigger (Hover or Scroll)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dial in the intensity and RGB split to preview the live fluid effect!"}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"Interactive liquid image effects","slug":"liquid-image-fx","author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4924de8-9236-488c-918b-7df9feddcf59/01a0b67b-22ec-70ba-8235-58842820e988.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-04-22T22:54:10.736Z","updatedAt":"2026-09-19T11:44:57.043Z","publishedAt":"2026-04-28T02:50:49.491Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://turquoise-dessert-110918.framer.app","price":"7","paymentUrl":"https://evixelstudio.gumroad.com/l/Liquid-Distortion","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"QRt2p5gv2aY0u3bnfKVF","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-28T02:50:49.491Z","updatedAt":"2026-04-28T02:50:49.491Z"},{"id":"019dbedc-2d39-79e8-a7aa-42f5578717ca","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"ug7KJ7rIeZe5fEgla0cT","resolved":true,"title":"SnapCursor Flow","body":"$69","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Add tactile, high-energy interaction to your website with dynamic cursor-following image trails. Snap Cursor Flow spawns responsive media cards as visitors move across the viewport or hover over specific containers, featuring 3D velocity tilt, cinematic reveal animations, and click explosion bursts."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"6 Reveal Styles:","marks":[{"type":"bold"}]},{"type":"text","text":" Animate cards into view with Pop, Circle Reveal, Wipe, 3D Flip, Directional Slide, or Glitch transitions."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Physics & 3D Tilt:","marks":[{"type":"bold"}]},{"type":"text","text":" Cards dynamically lean with momentum, turn toward movement direction, and tilt in 3D based on pointer speed."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Click Bursts:","marks":[{"type":"bold"}]},{"type":"text","text":" Explode a radial ring of staggered images on click or tap."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Visual FX Suite:","marks":[{"type":"bold"}]},{"type":"text","text":" Add speed-driven motion blur, RGB chromatic aberration, expanding spawn ripples, and a spring-physics glowing cursor orb."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Global or Local Trigger:","marks":[{"type":"bold"}]},{"type":"text","text":" Run across the entire viewport using body portals, or constrain trails cleanly inside container bounds."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"High Performance:","marks":[{"type":"bold"}]},{"type":"text","text":" Built-in image preloading prevents first-hover flashes, with memoized rendering for smooth 60fps interaction."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Property Controls"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Images:","marks":[{"type":"bold"}]},{"type":"text","text":" Upload up to 24 images with Sequential, Random, or non-repeating Shuffle playback."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Context:","marks":[{"type":"bold"}]},{"type":"text","text":" Choose trigger mode (Global Viewport vs. Component Bounds), overflow clipping, touch support, and z-index."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Spawning:","marks":[{"type":"bold"}]},{"type":"text","text":" Adjust spawn travel distance (density), interval cooldown, maximum active images, random scatter, and click burst counts."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Appearance:","marks":[{"type":"bold"}]},{"type":"text","text":" Control card width, aspect ratio, image fit (Cover/Contain), corner radius, shadow, opacity, and blend modes."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation & Effects:","marks":[{"type":"bold"}]},{"type":"text","text":" Lifespan, reveal style, drift direction/distance, 3D tilt intensity, motion blur, and glowing cursor orb."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Quick Start Guide"}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop the component onto your Framer canvas."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add your media to the "},{"type":"text","text":"Images","marks":[{"type":"bold"}]},{"type":"text","text":" array."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose your trigger area ("},{"type":"text","text":"Global","marks":[{"type":"bold"}]},{"type":"text","text":" for full-page trails or "},{"type":"text","text":"Component Bounds","marks":[{"type":"bold"}]},{"type":"text","text":" for a specific section)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Select your preferred reveal style (e.g. Pop, Flip, or Glitch) and preview!"}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"Interactive cursor image trails","slug":"snapcursor-flow","author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4924de8-9236-488c-918b-7df9feddcf59/01a0b675-82ad-760e-a782-b2c21f87ac15.png","metadata":{"tint":{"h":240,"s":23,"l":36},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-04-22T21:14:34.597Z","updatedAt":"2026-09-19T12:43:55.987Z","publishedAt":"2026-04-24T09:39:53.785Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://aware-trust-142281.framer.app","price":"7","paymentUrl":"https://evixelstudio.gumroad.com/l/CursorTrail-Image","workshop":false,"categories":[{"id":"c0182b81-fefe-45f5-ba00-27459f05e2a7","name":"Cursors","slug":"cursors"}],"lastSaveId":"pq0RvSSqcvx435zrHQph","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-24T09:39:53.785Z","updatedAt":"2026-04-24T09:39:53.785Z"},{"id":"019d93b2-f521-71c6-885b-493688f04450","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"D4iCY0OQPQ1983TkMfNF","resolved":true,"title":"Bezier Text 3D","body":"$6a","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Bring headlines to life with cinematic, curved 3D entrances. Bezier Text 3D animates letters, words, or lines along customizable 3D Bézier trajectories with depth, rotation, scale, and optional blur—driven seamlessly by page scroll or timed triggers."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"3D Bézier Trajectories:","marks":[{"type":"bold"}]},{"type":"text","text":" Guide text along X, Y, and Z axes with an adjustable 3D curve control point for dramatic arching and depth overshoot."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll & Time Drivers:","marks":[{"type":"bold"}]},{"type":"text","text":" Scrub motion smoothly with page scroll (spring-smoothed) or trigger on page load, in-view, or hover."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Granular Splitting:","marks":[{"type":"bold"}]},{"type":"text","text":" Animate individual letters, words, or lines with customizable stagger timing and directional ordering (Center Out, Edges In, Random, etc.)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full 3D Entrance FX:","marks":[{"type":"bold"}]},{"type":"text","text":" Add starting 3D rotations (X, Y, Z), scale, progressive fade-in, and motion blur that settle into crisp, readable text."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SEO & Accessible:","marks":[{"type":"bold"}]},{"type":"text","text":" Renders an accessible, un-split hidden copy for screen readers and search bots while visual spans handle 3D motion."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optimized Performance:","marks":[{"type":"bold"}]},{"type":"text","text":" Direct DOM style writes eliminate React re-render overhead, with full reduced-motion support."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Property Controls"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Typography:","marks":[{"type":"bold"}]},{"type":"text","text":" Full font formatting (family, weight, size, letter spacing, line height), color, and text alignment."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Driven By:","marks":[{"type":"bold"}]},{"type":"text","text":" Toggle between Scroll (start/end thresholds, smoothing) and Time (duration, delay, easing curves, in-view triggers)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Sequence:","marks":[{"type":"bold"}]},{"type":"text","text":" Split by Letters, Words, or Lines; set stagger duration, order patterns, and unit easing curves."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"3D Path & Entrance:","marks":[{"type":"bold"}]},{"type":"text","text":" Set perspective, 3D start/curve coordinates (X, Y, Z), 3D rotations, start scale, and blur."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Options:","marks":[{"type":"bold"}]},{"type":"text","text":" Overflow clipping, accessibility options, and live canvas preview scrubber."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Quick Start Guide"}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop the component onto your Framer canvas."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Enter your copy in the "},{"type":"text","text":"Text","marks":[{"type":"bold"}]},{"type":"text","text":" control."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose your motion mode ("},{"type":"text","text":"Scroll","marks":[{"type":"bold"}]},{"type":"text","text":" or "},{"type":"text","text":"Time","marks":[{"type":"bold"}]},{"type":"text","text":")."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust "},{"type":"text","text":"3D Path","marks":[{"type":"bold"}]},{"type":"text","text":" coordinates and preview the live flight path!"}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"Cinematic 3D kinetic text reveals","slug":"bezier-text-3d","author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4924de8-9236-488c-918b-7df9feddcf59/01a0b67c-ef6b-7003-b506-f66e1ede50ba.png","metadata":{"tint":{"h":0,"s":53,"l":66},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-04-14T15:19:44.761Z","updatedAt":"2026-09-19T12:46:32.039Z","publishedAt":"2026-04-16T00:31:12.161Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://proud-author-683541.framer.app","price":"7","paymentUrl":"https://evixelstudio.gumroad.com/l/BezierTextScroll","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"eqtco6Y9J9yjlL6MRn8x","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-16T00:31:12.161Z","updatedAt":"2026-04-16T00:31:12.161Z"},{"id":"019d917a-6e2c-7fcd-b43d-0c1943cdb10d","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"K8giVGDuO5iWvsC2iUlc","resolved":true,"title":"SplitReveal Text","body":"$6b","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Turn headlines and body copy into choreographed visual statements. Split-Reveal splits your text by character, word, or line, swinging open like 3D double doors, flipping along perspectives, or scattering into place with spring physics, line masking, and viewport triggers."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"4 Motion Presets:","marks":[{"type":"bold"}]},{"type":"text","text":" Choose from Doors (3D swinging), Flip (3D flap reveal), Split (opposing rotational snaps), and Scatter."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Flexible Splitting:","marks":[{"type":"bold"}]},{"type":"text","text":" Split by Characters, Words, or Lines with automatic grapheme segmentation that preserves complex punctuation and emojis."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Directional Patterns:","marks":[{"type":"bold"}]},{"type":"text","text":" Direct choreography From Center, To Center, Alternating, Uniform, or Random across Horizontal, Vertical, and Diagonal axes."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Line Masking:","marks":[{"type":"bold"}]},{"type":"text","text":" Clip lines individually so typography rises or swings fluidly out of invisible slits without clipping outer bounds."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Spring & Tween Physics:","marks":[{"type":"bold"}]},{"type":"text","text":" Tune spring stiffness, damping, and mass, or switch to customizable easing curves with line-by-line staggered delays."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SEO & Accessible:","marks":[{"type":"bold"}]},{"type":"text","text":" Renders an accessible, un-split hidden copy for screen readers and search crawlers while visual spans handle 3D motion."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Property Controls"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Content:","marks":[{"type":"bold"}]},{"type":"text","text":" Text string input, split level (Chars, Words, Lines), and semantic HTML tag (H1–H6, P, Div, Span)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Appearance & Layout:","marks":[{"type":"bold"}]},{"type":"text","text":" Typography styling, text color, line mask toggle, container clipping, and padding."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choreography:","marks":[{"type":"bold"}]},{"type":"text","text":" Preset selection, direction vector, dispersal pattern, 3D perspective depth, distance, rotation angle, scale, and entrance blur."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Timing:","marks":[{"type":"bold"}]},{"type":"text","text":" Motion engine (Spring vs. Tween), duration, stagger timing, sequence order (Center Out, Natural, Reverse, Random), and line delays."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Trigger & Advanced:","marks":[{"type":"bold"}]},{"type":"text","text":" In-view threshold, viewport offset, hover/tap replay triggers, reduced-motion fallback, and performance character caps."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Quick Start Guide"}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop the component onto your Framer canvas."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Type your headline in "},{"type":"text","text":"Content","marks":[{"type":"bold"}]},{"type":"text","text":" and select a split mode (e.g. Chars)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose a choreography preset (like "},{"type":"text","text":"Doors","marks":[{"type":"bold"}]},{"type":"text","text":" or "},{"type":"text","text":"Flip","marks":[{"type":"bold"}]},{"type":"text","text":")."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set the trigger to "},{"type":"text","text":"In View","marks":[{"type":"bold"}]},{"type":"text","text":" and preview the live animation!"}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"Choreographed split text reveals","slug":"splitreveal-text","author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4924de8-9236-488c-918b-7df9feddcf59/01a0b67d-8011-7357-84c4-9566b512b584.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-04-07T16:09:00.639Z","updatedAt":"2026-09-19T12:50:18.935Z","publishedAt":"2026-04-15T14:10:13.164Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://holistic-lynx-663318.framer.app","price":"12","paymentUrl":"https://evixelstudio.gumroad.com/l/SplitRevealText","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"oT1sm29qymCdM7LwBvD4","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-15T14:10:13.164Z","updatedAt":"2026-04-15T14:10:13.164Z"},{"id":"019d8e95-a15c-7eb9-aea9-11ca5effc12d","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"DcLEo85bJeto2eL3nWfX","resolved":true,"title":"Scroll Blur Text","body":"$6c","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Give your typography tactile physical momentum. Scroll Velocity Text Blur reacts in real time to page scroll speed—stretching, skewing, tilting, and blurring text with optical motion blur and spring-damped recovery that settles into crisp readability the moment scrolling stops."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Velocity-Driven Physics:","marks":[{"type":"bold"}]},{"type":"text","text":" Text reacts directly to how fast the user scrolls, driven by smooth, frame-synced springs that prevent jitter."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"True Directional Blur:","marks":[{"type":"bold"}]},{"type":"text","text":" Switch between standard uniform blur or directional SVG motion blur streaks aligned to the scroll axis."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Organic Squash & Stretch:","marks":[{"type":"bold"}]},{"type":"text","text":" Dynamically stretches along the movement vector while squashing the cross-axis to preserve visual volume."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Weight & Momentum Lag:","marks":[{"type":"bold"}]},{"type":"text","text":" Add trailing positional lag and 3D perspective tilt that leans typography into the direction of scroll."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Vertical & Horizontal Tracking:","marks":[{"type":"bold"}]},{"type":"text","text":" Reacts seamlessly to vertical page scrolling or horizontal scroll setups."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Performance Optimized:","marks":[{"type":"bold"}]},{"type":"text","text":" Includes sub-pixel dead zones to eliminate micro-jitter, automatic spring sleep when idle, and full reduced-motion accessibility."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Property Controls"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Typography:","marks":[{"type":"bold"}]},{"type":"text","text":" Full font formatting, custom color, text alignment, wrap toggles, and semantic SEO tags (H1–H4, P, Span)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Container:","marks":[{"type":"bold"}]},{"type":"text","text":" Box styling with padding, background fill, border controls, radius, shadow, and overflow clipping."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tracking:","marks":[{"type":"bold"}]},{"type":"text","text":" Axis selection, speed sensitivity, response curve (Soft, Linear, Smooth, Sharp), spring stiffness/damping, and an in-canvas preview slider."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Effects:","marks":[{"type":"bold"}]},{"type":"text","text":" Adjust peak blur intensity, blur mode (Uniform vs. Directional), stretch %, squash %, skew angle, lag distance, 3D tilt, and velocity fade."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Quick Start Guide"}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop the component onto your Framer canvas."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Enter your headline in "},{"type":"text","text":"Text","marks":[{"type":"bold"}]},{"type":"text","text":" and style your typography."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set your preferred "},{"type":"text","text":"Tracking","marks":[{"type":"bold"}]},{"type":"text","text":" sensitivity and spring feel."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dial in blur, stretch, and skew in "},{"type":"text","text":"Effects","marks":[{"type":"bold"}]},{"type":"text","text":", then preview while scrolling!"}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"Scroll-driven kinetic text blur","slug":"scroll-blur-text","author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4924de8-9236-488c-918b-7df9feddcf59/01a0b67e-1bfe-7229-90b4-c3827a59066f.png","metadata":{"tint":{"h":210,"s":70,"l":60},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-04-06T17:38:25.275Z","updatedAt":"2026-09-19T12:52:16.785Z","publishedAt":"2026-04-15T00:41:04.092Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://strange-onboarding-001808.framer.app","price":"5","paymentUrl":"https://evixelstudio.gumroad.com/l/ScrollVelocity","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"pfovAOtyaCPLNamP4Y7O","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-15T00:41:04.092Z","updatedAt":"2026-04-15T00:41:04.092Z"},{"id":"019d63ff-667d-783e-842e-988707c7317e","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"993","resolved":true,"title":"Animsequencer","body":"$6d","bodyJson":null,"introduction":"CSS Keyframe Animations","slug":"animsequencer","author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/993-QvLaBT8F8rx5VaI7km19gtiSx81mXl","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/993-jHQPxX8HKQrxGJuHsOJGqn77lXovBY","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-04T22:24:55.151Z","updatedAt":"2026-04-04T22:28:07.090Z","publishedAt":"2026-04-06T18:12:55.549Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"16q2scp9fpjc0daki3tag2ckg","paid":true,"categories":[{"id":"676f63da-b192-4974-930d-73185802088a","name":"Media","slug":"media"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-06T18:12:55.549Z","updatedAt":"2026-04-06T18:12:55.549Z"},{"id":"019d63fc-e26b-7450-ad87-88cb2aa0221c","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"958","resolved":true,"title":"Brand Guard","body":"$6e","bodyJson":null,"introduction":"Your Brand’s QA Layer","slug":"brand-guard","author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/958-48M4vhIddiMUc065m25JKb7p6zVDg8","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/958-Ml0Gsp6uwZCfCCzqrli5LRjpaAh1la","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-25T14:44:05.869Z","updatedAt":"2026-09-10T10:18:00.379Z","publishedAt":"2026-09-10T10:18:00.371Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"4guebz1cx12brsec1g27trgs2","paid":true,"categories":[{"id":"3fc802d9-7527-48e0-9403-c9bd534ab520","name":"Utilities","slug":"utilities"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-06T18:10:10.667Z","updatedAt":"2026-04-06T18:10:10.667Z"},{"id":"019d4e40-c83d-780e-ae47-17061e44e176","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"984","resolved":true,"title":"CMS Studio","body":"$6f","bodyJson":null,"introduction":"Framer CMS, like a spreadsheet","slug":"cms-studio","author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/984-aBx7JAlqvjx7RS6sexWUynJa5dVWXD","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/984-PGDzZVlRuHJ3K8uh6T90JGFTYD3L9k","metadata":{"tint":{"h":0,"s":0,"l":22},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-02T11:15:57.262Z","updatedAt":"2026-09-06T07:55:18.743Z","publishedAt":"2026-09-06T07:55:18.738Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"3xhgm4qrrdmublphrs12xklxi","paid":false,"categories":[{"id":"1ad3e7b2-bc61-42ce-b01a-7c8bb2278f1a","name":"CMS","slug":"cms"}],"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-02T12:52:41.661Z","updatedAt":"2026-04-02T12:52:41.661Z"},{"id":"019d3f4c-e913-75c1-8fc2-6885fdcd13a4","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"966","resolved":true,"title":"Conditional Show","body":"$70","bodyJson":null,"introduction":"Show or hide elements by rules","slug":"conditional-show","author":{"framerUserId":"f4924de8-9236-488c-918b-7df9feddcf59","name":"Evixel Studio","slug":"evixelstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1040899/avatar-rKy5PSsrJCXqvyoypsvKcOaOtAEZd4.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/966-KnFzfCeTZJrJUBpAHqvkBpUKn8gI0H","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/966-rLOAoXSxtXjNjg2xcaRvGFOzS9afL7","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-29T08:15:43.395Z","updatedAt":"2026-03-29T08:15:50.790Z","publishedAt":"2026-03-30T15:11:38.259Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"9zq0du84nozhhtzlum9rer5y3","paid":true,"categories":[{"id":"3fc802d9-7527-48e0-9403-c9bd534ab520","name":"Utilities","slug":"utilities"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-03-30T15:11:38.259Z","updatedAt":"2026-03-30T15:11:38.259Z"}],"pagination":{"next":"MDE5ZDNmNGMtZTkxMy03NWMxLThmYzItNjg4NWZkY2QxM2E0","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L71"}]