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

A cinematic, interactive WebGL ferrofluid effect for Framer.

Ferrofluid Background transforms your website into a living metallic surface inspired by ferrofluid — sharp magnetic spikes, liquid-like motion, glossy reflections, and dynamic cursor interaction combine to create a futuristic visual backdrop.

Built with WebGL and GLSL, it renders the effect directly on the GPU without external assets or video files. Use it as a full-screen background, hero visual, or atmospheric layer behind your typography and UI.

Preview

https://ferrofluidbackground.framer.website/

Great For

Ferrofluid Background works especially well for:

🚀 SaaS and technology websites
🤖 AI and futuristic landing pages
🎨 Creative portfolios
🧑‍🎨 Designer and developer portfolios
💎 Premium product websites
🖥 Hero sections
🌌 Dark-mode websites
🧪 Experimental and generative websites
🎮 Gaming and interactive experiences
🖼 Full-screen visual backgrounds
🪩 Creative agency websites
✨ Art-directed landing pages

Insert → Customize → Publish.

Support

Need help using Ferrofluid Background, found a bug, or have an idea for an improvement?

Feel free to reach out.

Email: karimsaif010@gmail.com

X: @karimsaif0

I'm always happy to help with questions, feedback, and feature requests.

63:T9c0,

Spotlight Accordion is a cinematic, interactive FAQ and content accordion designed for modern Framer websites.

Instead of behaving like a traditional accordion, Spotlight Accordion turns every interaction into a focused visual experience. Move your cursor across the component and a soft spotlight follows your movement, bringing the closest accordion item into focus while the surrounding items subtly dim and blur. Open an item and its answer expands smoothly while the row receives a visual width expansion without changing the component's actual layout width.

Preview

Explore the live component:

https://spotlightaccordion.framer.website/?editSite

Great For

Spotlight Accordion works especially well for:

Interactive FAQ sections
Creative agency websites
Designer portfolios
Framer templates
SaaS landing pages
Product websites
Studio websites
Digital agencies
Architecture portfolios
Personal portfolios
Case study pages
Services sections
Pricing explanations
Product feature sections
About pages
Interactive documentation
Editorial websites
Experimental landing pages
Dark-mode interfaces
Premium marketing websites

It can be used anywhere you want to present multiple pieces of information while keeping the interface visually engaging.

For example, use it for an FAQ section where visitors can quickly scan questions and then open the answer they are interested in. You can also use it for services, process steps, capabilities, project information, product specifications, or any content that benefits from progressive disclosure.

Support

If you have questions, find a bug, need help customizing the component, or want to share feedback, feel free to reach out.

X: https://x.com/karimsaif0

Email: karimsaif010@gmail.com

I'm happy to help with setup, customization questions, or issues related to the component.

64:Ta07,

Turn ordinary FAQs into an interactive magnetic experience.

Magnetic Accordion is a Framer component that combines a clean accordion layout with subtle cursor-driven physics. Each row reacts naturally as your pointer moves nearby, creating a soft magnetic pull that makes the interface feel responsive and alive.

Instead of simply hovering over a static FAQ row, the cursor creates a magnetic field around each item. The row gently moves toward the pointer, the question shifts with the movement, and the icon follows the cursor direction.

Cursor → Pull → Stretch → Open.

Preview: https://magneticaccordion.framer.website/

✨ Great For

Magnetic Accordion works especially well anywhere you want to present questions, information, or expandable content without making the interface feel static.

FAQ Sections

Create memorable FAQ sections with subtle cursor interaction instead of traditional static accordion rows.

SaaS Websites

Use it for product questions, pricing FAQs, feature explanations, onboarding information, and support sections.

Creative Portfolios

Add a more interactive layer to portfolio websites, case studies, studio websites, and personal portfolios.

Agencies & Studios

Create an interactive FAQ or services section that matches a more experimental visual identity.

Product Websites

Explain features, specifications, workflows, or common questions through expandable magnetic rows.

Landing Pages

Use it near the bottom of a landing page to answer important questions while maintaining visual interaction.

Interactive Navigation

The component can also be adapted for expandable information panels, service descriptions, or other content that benefits from a compact layout.

📩 Support

Need help using the component?

Have a question about customization?

Found an issue?

You can reach me directly.

X: https://x.com/karimsaif0

Email: karimsaif010@gmail.com

I'm happy to help with questions about the component, customization, or general usage.

65:Tea4,

A dynamic FAQ accordion inspired by the fisheye magnification effect.

Fisheye FAQ transforms a traditional accordion into an interactive, cursor-responsive experience. As the pointer moves across the list, nearby questions smoothly magnify based on their distance from the cursor. Hovering a question can automatically open its answer, creating a fluid and tactile FAQ interaction.

Built for modern Framer websites that want more personality than a standard accordion.

Preview

Live Preview — Fisheye FAQ

Great For

SaaS and startup websites
Product landing pages
Agency and studio websites
Portfolio websites
Interactive documentation
Product FAQs
Pricing and feature sections
Experimental and motion-focused websites
Minimal editorial layouts
Modern Framer templates

Features

🐟 Cursor-driven fisheye magnification
✨ Smooth spring-based interactions
🖱 Hover or click activation
📱 Touch and pen-friendly interaction
🔄 Animated answer expansion
➕ Customizable expand/collapse icon
🎯 Adjustable fisheye range and scale
🪄 Optional hover lift
🔍 Optional reveal blur
🎨 Fully customizable colors and borders
🔤 Framer Font controls
📐 Adjustable spacing, padding, radius, and width
⚡ Configurable spring stiffness, damping, and mass
🎬 Custom opening and closing animation
♿ Reduced-motion support
⌨ Keyboard support with Enter and Space

Customize

Make the interaction match your design system directly from the Framer property panel.

Customize the FAQ content, typography, colors, borders, shadows, spacing, corner radius, icon, fisheye intensity, cursor range, spring physics, hover movement, active scale, reveal blur, opening and closing animations, activation mode, reduced motion, and keyboard behavior.

No code changes are required for the standard customization.

Support

Need help customizing Fisheye FAQ or integrating it into your Framer project?

X: @karimsaif0

Email: karimsaif010@gmail.com

66:T9ef,

Thread Cards turns a simple card grid into a living interactive system. Cards physically respond to the cursor, attract toward each other, lift on hover, and connect through animated elastic threads that bend, flow, and react in real time.

Designed for modern Framer websites, portfolios, agencies, creative studios, SaaS products, and interactive landing pages that need something more dynamic than a traditional card layout.

Preview

https://threadcards.framer.website/

Great For

Creative agency websites
Portfolio and personal websites
Design studios
Digital products and SaaS
Interactive landing pages
Creative development websites
Case study sections
Services and capability sections
Experimental and motion-focused websites
Modern dark UI layouts

Features

Interactive physical-style thread connections
Responsive grid, horizontal, and vertical layouts
Grid, horizontal, and vertical connection modes
Cursor-based card movement
Magnetic card attraction
Elastic card movement with adjustable tension and damping
Animated thread sag and noise
Hover lift and scale effects
Animated active thread reveal
Flow particles traveling along active threads
Configurable thread glow
Custom active-thread colors
Optional card background images
Image reveal and image zoom effects
Responsive mobile columns
Fully customizable card content
Up to 12 cards
Keyboard-accessible card interactions
Reduced-motion support
Static renderer support for Framer
Responsive sizing with ResizeObserver
Optimized animation handling
Custom colors, spacing, radius, and typography styling

Support

Need help setting up Thread Cards or have a question about customization?

Reach out anytime:

X: https://x.com/karimsaif0

Email: karimsaif010@gmail.com

67:T4ab,

I noticed something that felt surprisingly overlooked in the Framer wedding template space: (Sound on 🔊)

Most wedding websites are built for English, but love stories aren’t limited to one language.

So I built Wedding Story a fully bilingual wedding website template for Framer, designed from the ground up for English (LTR) and Arabic (RTL).

It’s not just translated text. The entire experience adapts:

→ Proper RTL mirrored layouts

→ Dedicated Arabic typography

→ Live wedding countdown

→ RSVP system

→ Built-in music player

→ Full love-story timeline

→ Fully customizable in Framer

Built for couples, wedding planners, and designers who want something beautiful and polished out of the box — without sacrificing flexibility.

I wanted to make a wedding template that feels equally intentional in both languages.

Take a look →

Would love to know what you think. 💍

68:Te83,

Wedding Story is a romantic, fully responsive wedding website template built entirely in Framer. It's designed to give couples a beautiful, modern place to share their story, countdown to the big day, collect RSVPs, and keep guests informed all wrapped in warm, editorial-style visuals with subtle motion throughout. Every section, from the hero countdown to the closing thank-you page, is built with clean, reusable components so you can make it your own in minutes, not hours.

Live Preview:

English: https://weddingstoryday.framer.website/
Arabic (RTL): https://weddingstoryday.framer.website/home-ar

Great For

Couples building their own wedding website without touching code
Wedding planners offering a fast, polished website option to clients
Framer designers/freelancers looking for a premium wedding template to customize and resell for a client
Bilingual couples or Arabic-speaking audiences who need a proper RTL experience, not just a translated layout

Pages Included (10 total full English + Arabic)

Home
Our Story
RSVP
You're In
404

(Each page ships in both English and Arabic 5 pages × 2 languages = 10 total.)

Languages & Direction

English full LTR layout
Arabic full RTL layout, mirrored automatically
One-click language switcher in the nav
Dedicated Arabic typograph

Features

🎉 Live countdown timer to the wedding date
🎵 Background music player with a custom playlist (bride's song / groom's song / vintage turntable player)
💌 RSVP form attendance, guest count, dietary requirements, free-text message
📸 Photo gallery / moments section
💍 Our Story full love-story timeline page
🗓 Day schedule / timeline (arrival, ceremony, dinner, dancing)
📍 Venue section with map link
👗 Dress code guide
💌 Closing "thank you" section + dedicated confirmation page
✨ Scroll animations and decorative motion components (floral ornaments, film strip, floating hearts, flower drift, text reveal effects)

Support

X (Twitter): @karimsaif0
Email: karimsaif010@gmail.com

69:T970,

Magnetic Cards

Turn a simple card grid into a responsive, interactive experience with Magnetic Cards for Framer.

Each card reacts naturally to the pointer, creating a magnetic pull that makes the entire grid feel tactile and alive. Cards can subtly translate, rotate, and scale toward the cursor, while an optional magnetic grid adds gentle repulsion between nearby cards for an even more dynamic interaction.

Preview: https://magneticcards.framer.website/

Great for

Portfolio projects
Creative agency websites
Designer portfolios
Product showcases
Case studies
Team and profile sections
Service cards
Feature grids
Digital products
Interactive landing pages
Experimental and motion-focused websites

Features

Magnetic Interaction

Cards are attracted toward the pointer based on distance and configurable magnetic strength. The effect smoothly falls off as the pointer moves away.

Spring-Based Motion

Smooth spring and damping controls create natural movement instead of rigid or instant transformations.

Position, Rotation & Scale

Cards can translate toward the cursor while subtly rotating and scaling for a more tactile interaction.

Customizable Magnetic Radius

Control how far the pointer can influence cards, from a focused interaction to a large magnetic field.

Multiple Activation Modes

Choose between:

Hover activate while the pointer is inside the component.
Click toggle the magnetic interaction with a click or keyboard.
Always keep the interaction active whenever the pointer is inside.

Support

X: @karimsaif https://x.com/karimsaif0

Email: karimsaif010@gmail.com

I’m happy to help with setup, customization, bugs, or questions about using the component in your Framer project.

6a:Ta78,

Morph Cards

Create fluid, shape-driven card interactions where every card transforms as you explore the gallery.

Morph Cards goes beyond a simple hover effect. When a card becomes active, it smoothly expands, changes its proportions, lifts, rounds its corners, zooms its image, and reveals its content while the surrounding cards compress around it.

The result is a cinematic, editorial-style card layout designed for modern Framer websites.

Preview

https://morphcards.framer.website/

Great for

Creative agency websites
Portfolio projects
Product showcases
Photography websites
Architecture and interior design
Fashion and editorial websites
Case study sections
Art and culture websites
SaaS feature showcases
Interactive landing pages
Experimental Framer websites

Features

Shape-driven card morphing
Active card expansion
Inactive card compression
Independent active and inactive heights
Adjustable card proportions
Active card lift animation
Dynamic border-radius transitions
Image zoom on activation
Smooth image scaling
Animated content reveal
Optional descriptions
Custom typography with Framer Font controls
Custom easing presets
Adjustable animation duration
Custom overlay color
Custom title and description colors
Optional card borders
Adjustable card spacing
Up to 8 editable cards
Image controls for every card
Keyboard navigation
Focus states
Reduced-motion support
Static renderer support
Lightweight CSS-based animation
No external animation libraries
Responsive Framer layout support

Support

Need help customizing Morph Cards or using it in your Framer project?

Email: karimsaif010@gmail.com

X: https://x.com/karimsaif0

I'm happy to help with setup, customization, and usage questions.

6b:T885,

A smooth, interactive image carousel for Framer with cinematic blur transitions, directional movement, swipe gestures, autoplay, and customizable typography.

Blur Carousel is designed for portfolios, fashion websites, creative agencies, architecture, photography, product showcases, and editorial layouts where you want image navigation to feel more dynamic than a standard slider.

Preview

Live Preview — Blur Carousel

Great for

Creative portfolios
Photography websites
Fashion and editorial websites
Architecture portfolios
Product showcases
Agency websites
Art direction
Landing pages
Gallery sections
Minimal and premium websites

Customize everything

Use Framer's property controls to easily customize the component without touching the code.

Change the images, titles, movement direction, blur strength, border radius, 3D tilt, animation speed, easing, autoplay, navigation arrows, swipe sensitivity, typography, title position, colors, and more.

Build a carousel that matches your brand instead of adapting your design around a fixed component.

More components & templates

Explore more Framer components, templates, UI resources, and design products by Karim Saif:

Karim Saif — Components & Templates

Support

Have a question, found a bug, or need help customizing the component?

Email: karimsaif010@gmail.com

You can also reach me on X for updates, feedback, and new releases.

Made by @Karim Saif .

6c:Td15,

A 3D image carousel that orbits like a planet.

Turn a simple image gallery into a cinematic 3D experience.

Planetary Carousel places your images around an invisible orbital path, creating a dynamic depth effect where cards move toward and away from the viewer as they rotate.

Drag to explore the orbit, release for natural momentum, or let autoplay continuously rotate the gallery.

Perfect for portfolios, creative websites, photography, product showcases, agency sites, and interactive landing pages.

✨ Features

🪐 3D planetary orbit — Images follow a curved orbital path with realistic depth.
🖱 Drag to rotate — Grab and rotate the carousel naturally.
💨 Momentum physics — The orbit continues moving smoothly after you release.
🔄 Autoplay — Automatically rotate the carousel when idle.
↔ Direction control — Choose clockwise or counterclockwise rotation.
🎯 Active card scaling — The front-facing image can stand out automatically.
🌫 Depth blur — Add depth-of-field blur to cards farther from the viewer.
🧊 3D perspective — Control the strength of the camera perspective.
📐 Adjustable orbit — Change the orbit radius and vertical compression.
🎛 Tilt control — Angle the entire orbital plane.
🖼 Up to 12 images — Easily add, remove, and reorder images.

🚀 Great For

Portfolio websites Showcase selected projects or case studies with a more immersive presentation.

Photography Create a cinematic gallery that makes every image feel interactive.

Creative agencies Add an eye-catching visual section to your homepage.

Product showcases Present products or concepts with depth and movement.

Fashion & editorial Build a premium, art-directed image experience.

Landing pages Use the orbit as a hero visual or interactive centerpiece.

Have a question, found a bug, or want to suggest an improvement?

Support:

karimsaif010@gmail.com

X: @karimsaif0

I'd love to see what you build with it.

6d:T125d,

A cinematic 3D image carousel inspired by the structure and movement of a DNA helix.

Images travel along two opposing strands, creating a dynamic sense of depth, rotation, perspective, and motion. Drag, swipe, scroll, or use your keyboard to move through the gallery.

Preview: https://dnacarousel.framer.website/

Great For

DNA Carousel is ideal for:

Creative portfolios
Photography portfolios
Fashion websites
Digital agencies
Art direction
Product showcases
Editorial websites
Creative landing pages
Case studies
Experimental web design
Interactive galleries

It works especially well when you want your images to feel more cinematic and spatial than a traditional horizontal carousel.

Features

🧬 DNA-inspired 3D image layout
🖼 Add and reorder multiple images
🖱 Drag interaction
📱 Touch and swipe support
🖱 Mouse-wheel navigation
⌨ Keyboard navigation
♾ Infinite looping
⚡ Smooth momentum and inertia
🎯 Automatic snapping
▶ Optional autoplay
🎚 Adjustable autoplay speed
🌀 Adjustable DNA curve
↔ Adjustable helix spread
🌌 Adjustable 3D depth
📐 Adjustable perspective
🔄 Adjustable rotation and tilt
🔍 Adjustable blur
🌈 RGB split / chromatic aberration
🌑 Adjustable inactive opacity
✨ Optional depth shadows
🖱 Optional grab cursor
🔲 Adjustable image radius
📐 Fully responsive
♿ Reduced-motion support

Customize Everything

Control the visual personality of the carousel directly from Framer.

Layout

Adjust:

Image Width
Image Height
Gap
Image Radius

3D Motion

Customize:

Depth
Curve
Helix Spread
Perspective
Rotation
Tilt

Image Effects

Fine-tune:

Active Scale
Inactive Scale
Blur
RGB Split
Inactive Opacity
Shadow
Shadow Strength

Interaction

Control:

Drag Sensitivity
Inertia
Snap Strength
Autoplay
Autoplay Speed
Grab Cursor

Support

Need help setting up DNA Carousel, customizing the interaction, or have a question about the component?

X: @Karim Saif

Email: karimsaif010@gmail.com

I'm happy to help.

6e:T4de,

I wanted to make typography feel less static.

So I built Disco Shadow 🪩, an interactive RGB typography effect for Framer.

The idea is simple:

Move your cursor and the RGB channels separate based on your movement velocity.

🔴 Red moves against the direction 🟢 Green shifts perpendicular 🔵 Blue follows the movement

Then everything smoothly settles back when you stop.

The component includes:

• Native Framer Font controls

• Custom RGB colors

• Cursor velocity

• Smooth inertia

• Adjustable separation

• Velocity-driven glow

• Reduced-motion support

• Responsive canvas rendering

• Viewport-aware performance optimization

• No external dependencies

It works especially well for hero sections, portfolios, experimental websites, music, fashion, and creative agencies.

🎥 Try the live preview:

6f:Tf7e,

Disco Shadow is an interactive RGB typography effect that reacts to your cursor movement. Move faster and the red, green, and blue channels split apart, creating a vibrant chromatic shadow that feels inspired by disco lights, CRT displays, and digital motion graphics.

✨ Preview

https://discoshadowtext.framer.website/

Great For

Disco Shadow works especially well for:

Hero headlines
Creative portfolios
Digital agency websites
Music and entertainment websites
Fashion and editorial websites
Experimental landing pages
Interactive typography
Art and design portfolios
Posters and campaign pages
Tech and futuristic interfaces
Cursor-reactive experiences

Use it on a single headline for a subtle effect, or push the settings further for a bold psychedelic RGB distortion.

⚡ Features

🪩 Cursor-reactive RGB shadows
🎨 Independent Red, Green, and Blue colors
🖱 Velocity-based movement
💨 Smooth motion and inertia
📐 Adjustable RGB separation
🚀 Maximum separation control
✨ Velocity-driven glow
🌫 Adjustable glow blur
🎚 Custom opacity
🔤 Native Framer Font controls
📏 Font size and weight controls
✍ Letter spacing control
↕ Line-height control
↔ Text alignment control
🎨 Custom text color
🖼 Optional background color and opacity
📱 Touch-safe interaction
♿ Reduced-motion support
👁 IntersectionObserver optimization
📐 ResizeObserver support
🖥 DPR-aware canvas rendering
⚡ Performance-conscious animation
🧩 No external dependencies

🛠 Support

Need help using Disco Shadow or found an issue?

X: @karimsaif https://x.com/karimsaif0

Email: karimsaif010@gmail.com

Feel free to reach out for questions, bug reports, or feedback.

70:Ta6a,

Shadow Doppelgänger

Bring your typography to life with Shadow Doppelgänger, a smooth cursor-reactive text effect built for Framer.

The original text stays perfectly in place while a second “ghost” copy follows your cursor with natural delay and inertia. As you move, the ghost reacts dynamically with displacement, velocity, stretching, directional skew, blur, and opacity—creating a fluid and expressive motion effect. When the cursor stops or leaves the component, the ghost smoothly returns to its original position.

Preview

https://xn--doppelgngershadowtext-c2b.framer.website/

Move your cursor over the component and watch the typography come alive.

The ghost text reacts to your movement with:

Cursor-reactive displacement
Smooth delayed motion
Velocity-based movement
Dynamic horizontal stretching
Directional skew
Velocity-reactive blur
Dynamic opacity
Smooth return animation

Great For

Hero sections
Portfolio websites
Creative agencies
Designer portfolios
Landing pages
Experimental typography
Interactive headlines
Personal websites
Modern product websites
Creative Framer projects

Customize

Easily customize the effect directly from the Framer properties panel.

Control:

Text content
Font family, size, weight, spacing, and line height
Main text color
Ghost color
Ghost opacity
Ghost blur
Maximum movement distance
Velocity intensity
Follow delay
Motion smoothness
Stretch intensity
Directional skew
Return speed
Blur on/off
Stretch on/off
Skew on/off

Create anything from a subtle premium text interaction to a bold, highly expressive motion effect.

Support

If you need help, have questions, or want to share feedback, feel free to reach out.

X: @karimsaif0 Email: karimsaif010@gmail.com

Made with 💛 by Karim Saif

71:Tb5d,

Velocity Shadow is a dynamic Framer text component that transforms cursor movement into a smooth, directional shadow trail. Move your cursor slowly for a subtle shadow. Move faster and the shadow stretches farther, creating a dramatic motion effect that makes static typography feel alive.

The effect responds to the velocity and direction of your cursor, not simply its position. When the cursor stops, the shadow naturally loses momentum and fades back into the text.

Preview

Experience the effect live:

Live Preview — Velocity Shadow

Great For

Velocity Shadow works especially well for:

Hero headlines
Landing pages
Portfolio websites
Creative agency websites
Interactive typography
Experimental websites
Product launches
Digital experiences
Editorial layouts
Art and design portfolios
Mouse-interactive sections
Bold statement typography

It is particularly effective when you want a headline or key piece of typography to feel responsive, energetic, and interactive without adding complicated interactions to your Framer project.

Features🖱 Cursor Velocity Interaction

The shadow reacts to how quickly the cursor moves.

Slow movement → subtle shadow Fast movement → longer shadow Very fast movement → maximum shadow Cursor stops → shadow smoothly fades

The direction of the shadow follows the direction of your cursor movement, creating a natural sense of motion.

🎨 6 Ready-to-Use Presets

Choose from several carefully tuned visual styles:

Classic — clean and minimal
Soft — subtle blurred shadow
Chromatic — vibrant colored motion
Electric — energetic blue trail
Neon — bold glowing pink motion
Ink — dense editorial-style shadow

There is also a Custom preset for complete control over the effect.

Support

Need help using Velocity Shadow in your Framer project?

Email: kairmsaif010@gmail.com

@karimsaif0 on X

72:T435,

I wanted to make a typography component that feels more like motion graphics than a traditional marquee.

So I built Chromatic Marquee for Framer.

Instead of simply moving text from on chromaticmarqueeshader.framer.website effect.

You can control:

→ Red, Green & Blue colors

→ Chromatic offset

→ Depth

→ Blur

→ Intensity

→ Animation style

→ Animation speed

→ Animation amount

→ Marquee speed

→ Direction

→ Typography

→ Spacing

→ Background

It also comes with 5 ready-to-use presets:

Classic RGB · Cyber · Neon · Subtle · Glitch

The goal was simple: make something that designers Chromatic Marquee, while still having enough controls to make it their own.

73:Tafe,

Chromatic Marquee

Bring bold RGB energy and cinematic motion to your typography with Chromatic Marquee, an animated text marquee built for Framer.

Chromatic Marquee transforms ordinary scrolling text into a dynamic chromatic effect using independently controlled red, green, and blue layers.

✦ Preview

Live Preview — Chromatic Marquee

Features

• Infinite Marquee — Create a continuously scrolling text loop with smooth, seamless movement.

• Left & Right Direction — Easily control whether your marquee travels from left to right or right to left.

• 5 Visual Presets — Quickly switch between Classic RGB, Cyber, Neon, Subtle, and Glitch styles.

• Custom Mode — Take complete control over the chromatic effect and create your own visual combination.

• Independent RGB Colors — Customize the Red, Green, and Blue layers individually.

• Chromatic Offset — Control the distance between the RGB channels to create subtle or extreme color separation.

• Depth Control — Multiply the RGB separation for anything from a restrained effect to dramatic chromatic distortion.

• Blur — Add softness and glow to the colored layers.

• Intensity — Adjust the visual strength of the RGB effect.

• Animated RGB Layers — Turn chromatic animation on or off independently from the marquee movement.

• Multiple Animation Modes — Choose between None, Smooth, Pulse, Drift, and Glitch animations.

• Animation Speed & Amount — Fine-tune exactly how quickly and how far the RGB channels move.

• Typography Controls — Choose your Framer font, font weight, font size, and letter spacing.

• Marquee Speed — Control the horizontal scrolling speed from subtle movement to fast motion.

• Gap Control — Adjust the spacing between repeated text groups.

• Opacity Control — Fine-tune the visibility of the chromatic layers.

Support

Need help using the component, have a question, or found something that could be improved?

Email: karimsaif010@gmail.com

X: @karimsaif0 on X

74:T6a8,

Bring movement and depth to your typography with Wave Marquee Shader — an animated text marquee that transforms ordinary scrolling text into a fluid, organic wave.

Instead of a simple horizontal marquee, Wave Marquee Shader continuously deforms your typography with layered waves, creating a dynamic liquid-like motion that feels alive while remaining fully customizable.

Preview: Wave Marquee Shader Preview

Perfect for hero sections, landing pages, creative portfolios, experimental websites, agencies, digital products, and anywhere you want typography to become a visual experience.

Great For

Creative agency websites
Portfolio and personal websites
Hero sections
Experimental typography
Award-style websites
Interactive landing pages
Digital studios
Product launches
Fashion and editorial websites
Music and entertainment websites
Background typography
Creative Framer projects

Support

Need help using Wave Marquee Shader or have a question about the component?

Email: karimsaif010@gmail.com

X: @karimsaif0 on X

I’m happy to help with setup, customization, or troubleshooting.

60:["$","$L61",null,{"value":{"fallback":{"$inf$activity-creator-cdbd7ebc-86d4-4b64-baea-421f236c7c35-all:/unified/creator/cdbd7ebc-86d4-4b64-baea-421f236c7c35/activity/":[{"data":[{"id":"01a0bea6-56cf-74e5-81d8-d0472df4611a","type":"component.created","target":{"type":"component","id":"30EQ4VDpHMsRPX0pRLRw","preview":"Ferrofluid BG","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0bea5-c3d0-70b4-b479-7aebc47b8311.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-20T11:49:27.375Z","latestAt":"2026-09-20T11:49:27.375Z"},{"id":"01a0b989-cccd-74e0-808c-a58d56df38d3","type":"component.created","target":{"type":"component","id":"oM0EQVOJLTUEp3rLlJly","preview":"Spotlight Accordion","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0b988-dcda-7058-966f-d31b2be336b1.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-19T12:00:10.957Z","latestAt":"2026-09-19T12:00:10.957Z"},{"id":"01a0b466-7a30-7726-bf8c-ec8efe52daa1","type":"component.created","target":{"type":"component","id":"H5WfrxlnDugvIzMij4Ws","preview":"Magnetic Accordion","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0b465-c9be-73ee-bee9-36854d7e2ce2.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-18T12:03:29.968Z","latestAt":"2026-09-18T12:03:29.968Z"},{"id":"01a0af32-c636-7779-8c5e-5bab84155a94","type":"comment.reply","target":{"type":"post","id":"01a0aef3-5a47-703d-884d-77d33b8fa79d","preview":"Fish Eye Accordion","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0aef1-fc02-70dc-ad59-14fe8c623104.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0aef3-5a47-703d-884d-77d33b8fa79d","like":{"count":2,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a0af32-c610-74ba-9150-4b64994648a3","preview":"Big Thanks!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Big Thanks!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a0aef3-5a47-703d-884d-77d33b8fa79d","like":{"count":0,"liked":false},"reply":{"parentCommentId":"01a0af0e-e2de-73c9-aefa-d584de9e46f7"},"repost":null}},"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-17T11:48:55.478Z","latestAt":"2026-09-17T11:48:55.478Z"},{"id":"01a0af32-9632-7405-9bf7-98938219c58d","type":"comment.liked","target":{"type":"comment","id":"01a0af0e-e2de-73c9-aefa-d584de9e46f7","preview":"Professional work","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Professional work"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a0aef3-5a47-703d-884d-77d33b8fa79d","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0af0e-e2de-73c9-aefa-d584de9e46f7"},"repost":null}},"context":{"type":"post","id":"01a0aef3-5a47-703d-884d-77d33b8fa79d","preview":"Fish Eye Accordion","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0aef1-fc02-70dc-ad59-14fe8c623104.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0aef3-5a47-703d-884d-77d33b8fa79d","like":{"count":2,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-17T11:48:43.177Z","latestAt":"2026-09-17T11:48:43.177Z"},{"id":"01a0aef3-5cbd-7416-93a4-e6e8ff9dce11","type":"component.created","target":{"type":"component","id":"4M04K7bBPW3bsr3b3zAI","preview":"Fish Eye Accordion","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0aef1-fc02-70dc-ad59-14fe8c623104.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-17T10:39:39.709Z","latestAt":"2026-09-17T10:39:39.709Z"},{"id":"01a0aece-2a1d-76c3-bd14-fc8311d936d9","type":"template.liked","target":{"type":"template","id":"73041","preview":"Interio ST","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/1364828a-b355-487e-b32f-02641033b191/01a09f6b-ef47-7416-825a-4588f378ba5a.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-09-17T09:59:01.907Z","latestAt":"2026-09-17T09:59:01.907Z"},{"id":"01a0aece-2202-7291-9138-a153fef05077","type":"post.liked","target":{"type":"post","id":"01a0a387-2b17-70b8-919a-fccf9948b662","preview":"Introducing Frederock, a clean, editorial personal portfolio site for designers, freelancers, and creative professionals who want to showcase their work and attract clients.\nWhat's inside:\n1. Home\n2. About\n3. Projects (CMS)\n4. Project Detail\n5. News (CMS Blog)\n6. Article Detail\n7. Contact\n8. 404\nGrab the free remix here 👉 https://framer.link/KqnqkQC","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Introducing ","marks":[{"type":"bold"}]},{"type":"text","text":"Frederock","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/KqnqkQC","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":",","marks":[{"type":"bold"}]},{"type":"text","text":" a clean, editorial personal portfolio site for designers, freelancers, and creative professionals who want to showcase their work and attract clients."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What's inside:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"1. Home"}]},{"type":"paragraph","content":[{"type":"text","text":"2. About"}]},{"type":"paragraph","content":[{"type":"text","text":"3. Projects (CMS)"}]},{"type":"paragraph","content":[{"type":"text","text":"4. Project Detail"}]},{"type":"paragraph","content":[{"type":"text","text":"5. News (CMS Blog)"}]},{"type":"paragraph","content":[{"type":"text","text":"6. Article Detail"}]},{"type":"paragraph","content":[{"type":"text","text":"7. Contact"}]},{"type":"paragraph","content":[{"type":"text","text":"8. 404"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Grab the free remix here ","marks":[{"type":"bold"}]},{"type":"emoji","marks":[{"type":"bold"}],"attrs":{"name":"point_right","emoji":"👉"}},{"type":"text","text":" ","marks":[{"type":"bold"}]},{"type":"text","text":"https://framer.link/KqnqkQC","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/KqnqkQC","target":"_blank"}},{"type":"bold"}]}]}]},"thumbnail":"https://image.mux.com/Tfw015V54hkypQWzYUL5uKwtgPLUvqpwKTXOIsIJS9bA/thumbnail.webp?time=28.4","targetDeleted":false,"owned":false,"actions":{"postId":"01a0a387-2b17-70b8-919a-fccf9948b662","like":{"count":33,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":14,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-17T09:58:59.837Z","latestAt":"2026-09-17T09:58:59.837Z"},{"id":"01a0aece-1a07-7026-ac01-86fb4f65a374","type":"comment.created","target":{"type":"post","id":"01a0a91b-a839-70d9-8b96-afa6fe9efd2e","preview":"Homevio Website","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/1364828a-b355-487e-b32f-02641033b191/01a0a918-0732-7750-adb5-bfc42123b83a.png","targetDeleted":false,"owned":false,"actions":{"postId":"01a0a91b-a839-70d9-8b96-afa6fe9efd2e","like":{"count":40,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a0aece-19f3-752e-a503-32955ad01dfb","preview":"WOW","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"WOW"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a0a91b-a839-70d9-8b96-afa6fe9efd2e","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0aece-19f3-752e-a503-32955ad01dfb"},"repost":null}},"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-17T09:58:57.799Z","latestAt":"2026-09-17T09:58:57.799Z"},{"id":"01a0aece-0766-771d-a998-46796d391753","type":"template.liked","target":{"type":"template","id":"73205","preview":"Homevio Website","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/1364828a-b355-487e-b32f-02641033b191/01a0a918-0732-7750-adb5-bfc42123b83a.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-09-17T09:58:53.023Z","latestAt":"2026-09-17T09:58:53.023Z"},{"id":"01a0aecd-f2c9-764d-ac54-7f6a77679115","type":"comment.reply","target":{"type":"post","id":"01a0aa21-499d-7668-a3cd-a50e77bcdc0c","preview":"Thread Cards","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0aa20-e135-72ca-8073-77d471705710.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0aa21-499d-7668-a3cd-a50e77bcdc0c","like":{"count":8,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a0aecd-f2ad-74cd-8e79-f10d3d6717c6","preview":"Thanks a lot! Tanjim","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thanks a lot! Tanjim"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a0aa21-499d-7668-a3cd-a50e77bcdc0c","like":{"count":0,"liked":false},"reply":{"parentCommentId":"01a0aec6-f2d4-701b-ae96-04d2d8c236e1"},"repost":null}},"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-17T09:58:47.753Z","latestAt":"2026-09-17T09:58:47.753Z"},{"id":"01a0aecd-a30f-73e6-aa69-e1fe4497d9b6","type":"comment.liked","target":{"type":"comment","id":"01a0aec6-f2d4-701b-ae96-04d2d8c236e1","preview":"Looks really good @Karim Saif","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Looks really good "},{"type":"mention","attrs":{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","slug":"karim-saif","label":"Karim Saif","mentionSuggestionChar":"@"}},{"type":"text","text":" "}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a0aa21-499d-7668-a3cd-a50e77bcdc0c","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0aec6-f2d4-701b-ae96-04d2d8c236e1"},"repost":null}},"context":{"type":"post","id":"01a0aa21-499d-7668-a3cd-a50e77bcdc0c","preview":"Thread Cards","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0aa20-e135-72ca-8073-77d471705710.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0aa21-499d-7668-a3cd-a50e77bcdc0c","like":{"count":8,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-17T09:58:27.339Z","latestAt":"2026-09-17T09:58:27.339Z"},{"id":"01a0aa21-4bfe-7798-8588-30e137f4abbc","type":"component.created","target":{"type":"component","id":"NUOGcFs0r4YR3MNQCFXd","preview":"Thread Cards","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0aa20-e135-72ca-8073-77d471705710.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-16T12:11:43.998Z","latestAt":"2026-09-16T12:11:43.998Z"},{"id":"01a0a9cf-96d6-7718-9ef0-ae5fa566e106","type":"creator.followed","target":{"type":"creator","id":"d7b633f0-85d0-4e75-b61f-08c45984e34b","preview":"PixlForm®","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d7b633f0-85d0-4e75-b61f-08c45984e34b/pdzpgzrh","slug":"pixl-form","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-16T10:42:29.201Z","latestAt":"2026-09-16T10:42:29.201Z"},{"id":"01a0a9c9-e64a-75b5-b918-d3cfba0e7d55","type":"comment.reply","target":{"type":"post","id":"01a0a532-e34d-700a-9f47-0cf5184adf00","preview":"Wedding Story RTLTR","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0a530-1519-753c-9bcf-971badd4f7d8.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0a532-e34d-700a-9f47-0cf5184adf00","like":{"count":9,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a0a9c9-e62c-73ce-abf3-214159747bde","preview":"Big Appreciate! PixlForm","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Big Appreciate! PixlForm"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a0a532-e34d-700a-9f47-0cf5184adf00","like":{"count":0,"liked":false},"reply":{"parentCommentId":"01a0a99a-45c7-7348-ae78-edaad3f3a2dd"},"repost":null}},"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-16T10:36:16.330Z","latestAt":"2026-09-16T10:36:16.330Z"},{"id":"01a0a9c9-ab2e-72ab-b39a-e5e62ae5c5c2","type":"comment.liked","target":{"type":"comment","id":"01a0a99a-45c7-7348-ae78-edaad3f3a2dd","preview":"The bilingual wedding story angle is a great touch — this feels really considered.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"The bilingual wedding story angle is a great touch — this feels really considered."}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a0a532-e34d-700a-9f47-0cf5184adf00","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0a99a-45c7-7348-ae78-edaad3f3a2dd"},"repost":null}},"context":{"type":"post","id":"01a0a532-e34d-700a-9f47-0cf5184adf00","preview":"Wedding Story RTLTR","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0a530-1519-753c-9bcf-971badd4f7d8.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0a532-e34d-700a-9f47-0cf5184adf00","like":{"count":9,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-16T10:36:01.195Z","latestAt":"2026-09-16T10:36:01.195Z"},{"id":"01a0a9c9-a2fe-71d3-896f-d81430748be2","type":"comment.reply","target":{"type":"post","id":"01a0a532-e34d-700a-9f47-0cf5184adf00","preview":"Wedding Story RTLTR","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0a530-1519-753c-9bcf-971badd4f7d8.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0a532-e34d-700a-9f47-0cf5184adf00","like":{"count":9,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a0a9c9-a2ea-77ae-9384-f350123297bc","preview":"Big Appreciate! Tanjim","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Big Appreciate! Tanjim"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a0a532-e34d-700a-9f47-0cf5184adf00","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0a86c-eaf3-764f-a1dd-635783c2060f"},"repost":null}},"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-16T10:35:59.102Z","latestAt":"2026-09-16T10:35:59.102Z"},{"id":"01a0a9c8-60c3-761c-af8a-973c403ac4e1","type":"comment.liked","target":{"type":"comment","id":"01a0a86c-eaf3-764f-a1dd-635783c2060f","preview":"Yes really cool @Karim Saif","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Yes really cool "},{"type":"mention","attrs":{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","slug":"karim-saif","label":"Karim Saif","mentionSuggestionChar":"@"}},{"type":"text","text":" "}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a0a532-e34d-700a-9f47-0cf5184adf00","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0a86c-eaf3-764f-a1dd-635783c2060f"},"repost":null}},"context":{"type":"post","id":"01a0a532-e34d-700a-9f47-0cf5184adf00","preview":"Wedding Story RTLTR","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0a530-1519-753c-9bcf-971badd4f7d8.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0a532-e34d-700a-9f47-0cf5184adf00","like":{"count":9,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-16T10:34:36.596Z","latestAt":"2026-09-16T10:34:36.596Z"},{"id":"01a0a532-e5b4-74c8-83a6-7969134497c4","type":"template.created","target":{"type":"template","id":"73154","preview":"Wedding Story RTLTR","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0a530-1519-753c-9bcf-971badd4f7d8.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-09-15T13:12:51.380Z","latestAt":"2026-09-15T13:12:51.380Z"},{"id":"01a0a51a-fc09-7220-9ed5-ff33a8b9e8c1","type":"comment.created","target":{"type":"post","id":"01a0a517-25a7-75c6-8bda-10dab60274e9","preview":"RealProp","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/173addac-0fe6-45a6-b69a-85da9b46aadb/01a0a514-c984-7509-8ffb-c98ae704ef12.jpg","targetDeleted":false,"owned":false,"actions":{"postId":"01a0a517-25a7-75c6-8bda-10dab60274e9","like":{"count":9,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a0a51a-fbf3-758a-bac2-ff7840e9cb2a","preview":"Nice","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Nice"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a0a517-25a7-75c6-8bda-10dab60274e9","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0a51a-fbf3-758a-bac2-ff7840e9cb2a"},"repost":null}},"actors":[{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","slug":"karim-saif","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-15T12:46:44.233Z","latestAt":"2026-09-15T12:46:44.233Z"}],"pagination":{"next":"MjAyNi0wOS0xNVQxMjo0Njo0NC4yMzNafDAxYTBhNTFhLWZjMDktNzIyMC05ZWQ1LWZmMzNhOGI5ZThjMQ","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:cdbd7ebc-86d4-4b64-baea-421f236c7c35:/unified/posts/?creator=cdbd7ebc-86d4-4b64-baea-421f236c7c35&with=reposts":[{"data":[{"id":"01a0bea6-5471-70fa-b822-27b25f17e004","title":null,"body":"

What if your Framer background behaved like liquid metal?

I built Ferrofluid Background, a procedural WebGL component that creates a magnetic ferrofluid surface with:

🧲 Dynamic magnetic spikes

🖱 Cursor interaction

✨ Metallic reflections

🌊 Fluid motion

🎨 Multiple visual presets

⚡ Performance-conscious rendering

📱 Responsive WebGL rendering

Designed to work directly inside Framer with everything exposed through Property Controls.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"What if your Framer background behaved like liquid metal?"}]},{"type":"paragraph","content":[{"type":"text","text":"I built "},{"type":"text","text":"Ferrofluid Background","marks":[{"type":"bold"}]},{"type":"text","text":", a procedural WebGL component that creates a magnetic ferrofluid surface with:"}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"magnet","emoji":"🧲"}},{"type":"text","text":" Dynamic magnetic spikes "}]},{"type":"paragraph","content":[{"type":"text","text":"🖱 Cursor interaction "}]},{"type":"paragraph","content":[{"type":"text","text":"✨ Metallic reflections "}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"ocean","emoji":"🌊"}},{"type":"text","text":" Fluid motion "}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"art","emoji":"🎨"}},{"type":"text","text":" Multiple visual presets "}]},{"type":"paragraph","content":[{"type":"text","text":"⚡ Performance-conscious rendering "}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"iphone","emoji":"📱"}},{"type":"text","text":" Responsive WebGL rendering"}]},{"type":"paragraph","content":[{"type":"text","text":"Designed to work directly inside Framer with everything exposed through Property Controls."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"30EQ4VDpHMsRPX0pRLRw","resolved":true,"title":"Ferrofluid BG","body":"$62","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A cinematic, interactive WebGL ferrofluid effect for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Ferrofluid Background transforms your website into a living metallic surface inspired by ferrofluid — sharp magnetic spikes, liquid-like motion, glossy reflections, and dynamic cursor interaction combine to create a futuristic visual backdrop."}]},{"type":"paragraph","content":[{"type":"text","text":"Built with WebGL and GLSL, it renders the effect directly on the GPU without external assets or video files. Use it as a full-screen background, hero visual, or atmospheric layer behind your typography and UI."}]},{"type":"customHeading","content":[{"type":"text","text":"Preview"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"https://ferrofluidbackground.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://ferrofluidbackground.framer.website/","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"Great For"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Ferrofluid Background works especially well for:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}},{"type":"text","text":" SaaS and technology websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"robot","emoji":"🤖"}},{"type":"text","text":" AI and futuristic landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"art","emoji":"🎨"}},{"type":"text","text":" Creative portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"artist","emoji":"🧑‍🎨"}},{"type":"text","text":" Designer and developer portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"gem","emoji":"💎"}},{"type":"text","text":" Premium product websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"🖥 Hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"milky_way","emoji":"🌌"}},{"type":"text","text":" Dark-mode websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"test_tube","emoji":"🧪"}},{"type":"text","text":" Experimental and generative websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"🎮 Gaming and interactive experiences"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"🖼 Full-screen visual backgrounds"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"mirror_ball","emoji":"🪩"}},{"type":"text","text":" Creative agency websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"✨ Art-directed landing pages"}]}]}]},{"type":"customHeading","attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Insert → Customize → Publish.","marks":[{"type":"bold"}]}]},{"type":"customHeading","content":[{"type":"text","text":"Support"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Need help using Ferrofluid Background, found a bug, or have an idea for an improvement?"}]},{"type":"paragraph","content":[{"type":"text","text":"Feel free to reach out."}]},{"type":"paragraph","content":[{"type":"text","text":"Email:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" @karimsaif0"}]},{"type":"paragraph","content":[{"type":"text","text":"I'm always happy to help with questions, feedback, and feature requests."}]}]},"introduction":"living metallic surface","slug":"ferrofluid-bg","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0bea5-c3d0-70b4-b479-7aebc47b8311.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1171,"height":786}}],"post":null,"createdAt":"2026-09-20T11:49:26.052Z","updatedAt":"2026-09-20T11:49:26.052Z","publishedAt":"2026-09-20T11:49:26.050Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://ferrofluidbackground.framer.website/","price":"6","paymentUrl":"https://karimsaif.lemonsqueezy.com/checkout/buy/2dd23b51-cf0c-407f-bb93-4083929ed8e2","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"1FaCAPuKItwqAsBCHi6i","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-09-20T11:49:26.770Z","updatedAt":"2026-09-20T11:49:26.770Z"},{"id":"01a0b989-ca5c-74ed-98b3-e39e9f17be8f","title":null,"body":"

I wanted to make the humble accordion feel a little more alive. ✨

So I built Spotlight Accordion for Framer, an interactive accordion where the interface reacts to your cursor and puts focus exactly where you are looking.

✨ Cursor-following spotlight

✨ Focused row scaling

✨ Ambient glow

✨ Smooth open/close animation

✨ Animated plus/minus icon

✨ Single or multiple open modes

✨ Responsive and touch-friendly

✨ Reduced-motion support

✨ Fully customizable through Framer controls

The goal was simple: keep the familiar accordion UX, but give it a more cinematic and interactive feel.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I wanted to make the humble accordion feel a little more alive. ✨"}]},{"type":"paragraph","content":[{"type":"text","text":"So I built "},{"type":"text","text":"Spotlight Accordion for Framer","marks":[{"type":"bold"}]},{"type":"text","text":", an interactive accordion where the interface reacts to your cursor and puts focus exactly where you are looking."}]},{"type":"paragraph","content":[{"type":"text","text":"✨ Cursor-following spotlight "}]},{"type":"paragraph","content":[{"type":"text","text":"✨ Focused row scaling "}]},{"type":"paragraph","content":[{"type":"text","text":"✨ Ambient glow "}]},{"type":"paragraph","content":[{"type":"text","text":"✨ Smooth open/close animation "}]},{"type":"paragraph","content":[{"type":"text","text":"✨ Animated plus/minus icon "}]},{"type":"paragraph","content":[{"type":"text","text":"✨ Single or multiple open modes "}]},{"type":"paragraph","content":[{"type":"text","text":"✨ Responsive and touch-friendly "}]},{"type":"paragraph","content":[{"type":"text","text":"✨ Reduced-motion support "}]},{"type":"paragraph","content":[{"type":"text","text":"✨ Fully customizable through Framer controls"}]},{"type":"paragraph","content":[{"type":"text","text":"The goal was simple: keep the familiar accordion UX, but give it a more cinematic and interactive feel."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"oM0EQVOJLTUEp3rLlJly","resolved":true,"title":"Spotlight Accordion","body":"$63","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Spotlight Accordion is a cinematic, interactive FAQ and content accordion designed for modern Framer websites."}]},{"type":"paragraph","content":[{"type":"text","text":"Instead of behaving like a traditional accordion, Spotlight Accordion turns every interaction into a focused visual experience. Move your cursor across the component and a soft spotlight follows your movement, bringing the closest accordion item into focus while the surrounding items subtly dim and blur. Open an item and its answer expands smoothly while the row receives a visual width expansion without changing the component's actual layout width."}]},{"type":"customHeading","content":[{"type":"text","text":"Preview"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Explore the live component:"}]},{"type":"paragraph","content":[{"type":"text","text":"https://spotlightaccordion.framer.website/?editSite","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://spotlightaccordion.framer.website/?editSite","target":"_blank"}}]}]},{"type":"customHeading","attrs":{"level":1}},{"type":"customHeading","content":[{"type":"text","text":"Great For"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Spotlight Accordion works especially well for:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive FAQ sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agency websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Designer portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Framer templates"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Studio websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Digital agencies"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Architecture portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Personal portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Case study pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Services sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pricing explanations"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product feature sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"About pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive documentation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editorial websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dark-mode interfaces"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Premium marketing websites"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"It can be used anywhere you want to present multiple pieces of information while keeping the interface visually engaging."}]},{"type":"paragraph","content":[{"type":"text","text":"For example, use it for an FAQ section where visitors can quickly scan questions and then open the answer they are interested in. You can also use it for services, process steps, capabilities, project information, product specifications, or any content that benefits from progressive disclosure."}]},{"type":"customHeading","attrs":{"level":1}},{"type":"customHeading","content":[{"type":"text","text":"Support"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"If you have questions, find a bug, need help customizing the component, or want to share feedback, feel free to reach out."}]},{"type":"paragraph","content":[{"type":"text","text":"X: "},{"type":"text","text":"https://x.com/karimsaif0","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/karimsaif0","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Email: "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"I'm happy to help with setup, customization questions, or issues related to the component."}]}]},"introduction":"focused visual experience","slug":"spotlight-accordion","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0b988-dcda-7058-966f-d31b2be336b1.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1177,"height":788}}],"post":null,"createdAt":"2026-09-19T12:00:09.643Z","updatedAt":"2026-09-19T12:00:09.643Z","publishedAt":"2026-09-19T12:00:09.640Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://spotlightaccordion.framer.website/","price":"5","paymentUrl":"https://karimsaif.lemonsqueezy.com/checkout/buy/74075c51-abcd-46c5-bd2c-2362f5083711","workshop":false,"categories":[{"id":"cf876fb8-579b-4a79-8604-b7feed61bcb0","name":"Accordions","slug":"accordions"}],"lastSaveId":"fxw58H40IIQofSUMQCt1","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-09-19T12:00:10.332Z","updatedAt":"2026-09-19T12:00:10.332Z"},{"id":"01a0b466-77cb-70b8-a502-7cd7d7fcd538","title":null,"body":"

What if an FAQ didn't feel like an FAQ?

I built Magnetic Accordion for Framer, an interactive accordion where each row subtly responds to the cursor with magnetic physics.

🧲 Cursor creates a magnetic field

↗️ Rows pull toward the pointer

↔️ Question text shifts with the movement

➕ The icon follows the cursor direction

⚡ Answers reveal with smooth spring-inspired motion

📱 Touch devices automatically switch to a simpler interaction

The goal was simple: take a familiar UI pattern and give it a little more physical personality.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"What if an FAQ didn't feel like an FAQ?"}]},{"type":"paragraph","content":[{"type":"text","text":"I built "},{"type":"text","text":"Magnetic Accordion","marks":[{"type":"bold"}]},{"type":"text","text":" for Framer, an interactive accordion where each row subtly responds to the cursor with magnetic physics."}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"magnet","emoji":"🧲"}},{"type":"text","text":" Cursor creates a magnetic field "}]},{"type":"paragraph","content":[{"type":"text","text":"↗️ Rows pull toward the pointer "}]},{"type":"paragraph","content":[{"type":"text","text":"↔️ Question text shifts with the movement "}]},{"type":"paragraph","content":[{"type":"text","text":"➕ The icon follows the cursor direction "}]},{"type":"paragraph","content":[{"type":"text","text":"⚡ Answers reveal with smooth spring-inspired motion "}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"iphone","emoji":"📱"}},{"type":"text","text":" Touch devices automatically switch to a simpler interaction"}]},{"type":"paragraph","content":[{"type":"text","text":"The goal was simple: take a familiar UI pattern and give it a little more physical personality."}]},{"type":"paragraph"}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"H5WfrxlnDugvIzMij4Ws","resolved":true,"title":"Magnetic Accordion","body":"$64","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Turn ordinary FAQs into an interactive magnetic experience."}]},{"type":"paragraph","content":[{"type":"text","text":"Magnetic Accordion","marks":[{"type":"bold"}]},{"type":"text","text":" is a Framer component that combines a clean accordion layout with subtle cursor-driven physics. Each row reacts naturally as your pointer moves nearby, creating a soft magnetic pull that makes the interface feel responsive and alive."}]},{"type":"paragraph","content":[{"type":"text","text":"Instead of simply hovering over a static FAQ row, the cursor creates a magnetic field around each item. The row gently moves toward the pointer, the question shifts with the movement, and the icon follows the cursor direction."}]},{"type":"paragraph","content":[{"type":"text","text":"Cursor → Pull → Stretch → Open.","marks":[{"type":"bold"}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Preview:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"https://magneticaccordion.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://magneticaccordion.framer.website/","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"✨ Great For"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Magnetic Accordion works especially well anywhere you want to present questions, information, or expandable content without making the interface feel static."}]},{"type":"customHeading","content":[{"type":"text","text":"FAQ Sections"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Create memorable FAQ sections with subtle cursor interaction instead of traditional static accordion rows."}]},{"type":"customHeading","content":[{"type":"text","text":"SaaS Websites"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Use it for product questions, pricing FAQs, feature explanations, onboarding information, and support sections."}]},{"type":"customHeading","content":[{"type":"text","text":"Creative Portfolios"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Add a more interactive layer to portfolio websites, case studies, studio websites, and personal portfolios."}]},{"type":"customHeading","content":[{"type":"text","text":"Agencies & Studios"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Create an interactive FAQ or services section that matches a more experimental visual identity."}]},{"type":"customHeading","content":[{"type":"text","text":"Product Websites"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Explain features, specifications, workflows, or common questions through expandable magnetic rows."}]},{"type":"customHeading","content":[{"type":"text","text":"Landing Pages"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Use it near the bottom of a landing page to answer important questions while maintaining visual interaction."}]},{"type":"customHeading","content":[{"type":"text","text":"Interactive Navigation"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"The component can also be adapted for expandable information panels, service descriptions, or other content that benefits from a compact layout."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"envelope_with_arrow","emoji":"📩"}},{"type":"text","text":" Support"}]},{"type":"paragraph","content":[{"type":"text","text":"Need help using the component?"}]},{"type":"paragraph","content":[{"type":"text","text":"Have a question about customization?"}]},{"type":"paragraph","content":[{"type":"text","text":"Found an issue?"}]},{"type":"paragraph","content":[{"type":"text","text":"You can reach me directly."}]},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"https://x.com/karimsaif0","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/karimsaif0","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Email:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"I'm happy to help with questions about the component, customization, or general usage."}]}]},"introduction":"Reacts naturally as your pointer","slug":"magnetic-accordion","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0b465-c9be-73ee-bee9-36854d7e2ce2.png","metadata":{"tint":{"h":20,"s":47,"l":30},"width":1190,"height":786}}],"post":null,"createdAt":"2026-09-18T12:03:28.716Z","updatedAt":"2026-09-18T12:03:28.716Z","publishedAt":"2026-09-18T12:03:28.713Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://magneticaccordion.framer.website/","price":"5","paymentUrl":"https://karimsaif.lemonsqueezy.com/checkout/buy/78cf8f1d-8c95-4dde-b044-332bad41316f","workshop":false,"categories":[{"id":"cf876fb8-579b-4a79-8604-b7feed61bcb0","name":"Accordions","slug":"accordions"}],"lastSaveId":"iH1a99xyEaKPeRIhtljk","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-18T12:03:29.355Z","updatedAt":"2026-09-18T12:03:29.355Z"},{"id":"01a0aef3-5a47-703d-884d-77d33b8fa79d","title":null,"body":"

I just released Fisheye FAQ, an interactive FAQ component for Framer.

Instead of treating an FAQ as a static list, Fisheye FAQ uses cursor proximity to create a smooth magnification effect inspired by the fisheye interaction pattern.

As you move through the questions, nearby items respond to the cursor, while the focused question can automatically expand and reveal its answer.

It includes:

• Cursor-driven fisheye scaling

• Hover or click activation

• Spring-based motion

• Custom opening and closing animations

• Configurable blur and hover lift

• Full typography and color controls

• Touch-friendly interaction

• Keyboard support

• Reduced-motion support

• Framer static-renderer handling

• Up to 30 customizable FAQ items

The goal was simple: take a familiar UI pattern and give it a more tactile, expressive interaction without making it difficult to customize.

Live preview:

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I just released "},{"type":"text","text":"Fisheye FAQ","marks":[{"type":"bold"}]},{"type":"text","text":", an interactive FAQ component for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Instead of treating an FAQ as a static list, Fisheye FAQ uses cursor proximity to create a smooth magnification effect inspired by the fisheye interaction pattern."}]},{"type":"paragraph","content":[{"type":"text","text":"As you move through the questions, nearby items respond to the cursor, while the focused question can automatically expand and reveal its answer."}]},{"type":"paragraph","content":[{"type":"text","text":"It includes:"}]},{"type":"paragraph","content":[{"type":"text","text":"• Cursor-driven fisheye scaling "}]},{"type":"paragraph","content":[{"type":"text","text":"• Hover or click activation "}]},{"type":"paragraph","content":[{"type":"text","text":"• Spring-based motion "}]},{"type":"paragraph","content":[{"type":"text","text":"• Custom opening and closing animations "}]},{"type":"paragraph","content":[{"type":"text","text":"• Configurable blur and hover lift "}]},{"type":"paragraph","content":[{"type":"text","text":"• Full typography and color controls "}]},{"type":"paragraph","content":[{"type":"text","text":"• Touch-friendly interaction "}]},{"type":"paragraph","content":[{"type":"text","text":"• Keyboard support "}]},{"type":"paragraph","content":[{"type":"text","text":"• Reduced-motion support "}]},{"type":"paragraph","content":[{"type":"text","text":"• Framer static-renderer handling "}]},{"type":"paragraph","content":[{"type":"text","text":"• Up to 30 customizable FAQ items"}]},{"type":"paragraph","content":[{"type":"text","text":"The goal was simple: take a familiar UI pattern and give it a more tactile, expressive interaction without making it difficult to customize."}]},{"type":"paragraph","content":[{"type":"text","text":"Live preview:"}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"4M04K7bBPW3bsr3b3zAI","resolved":true,"title":"Fish Eye Accordion","body":"$65","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A dynamic FAQ accordion inspired by the fisheye magnification effect."}]},{"type":"paragraph","content":[{"type":"text","text":"Fisheye FAQ transforms a traditional accordion into an interactive, cursor-responsive experience. As the pointer moves across the list, nearby questions smoothly magnify based on their distance from the cursor. Hovering a question can automatically open its answer, creating a fluid and tactile FAQ interaction."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for modern Framer websites that want more personality than a standard accordion."}]},{"type":"paragraph","content":[{"type":"text","text":"Preview","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Live Preview — Fisheye FAQ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://fisheyefaq.framer.website","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Great For","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS and startup websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Agency and studio websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive documentation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product FAQs"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pricing and feature sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental and motion-focused websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Minimal editorial layouts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern Framer templates"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"fish","emoji":"🐟"}},{"type":"text","text":" Cursor-driven fisheye magnification"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}},{"type":"text","text":" Smooth spring-based interactions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"computer_mouse","emoji":"🖱"}},{"type":"text","text":" Hover or click activation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"iphone","emoji":"📱"}},{"type":"text","text":" Touch and pen-friendly interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"arrows_counterclockwise","emoji":"🔄"}},{"type":"text","text":" Animated answer expansion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"heavy_plus_sign","emoji":"➕"}},{"type":"text","text":" Customizable expand/collapse icon"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"dart","emoji":"🎯"}},{"type":"text","text":" Adjustable fisheye range and scale"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"magic_wand","emoji":"🪄"}},{"type":"text","text":" Optional hover lift"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"mag","emoji":"🔍"}},{"type":"text","text":" Optional reveal blur"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"art","emoji":"🎨"}},{"type":"text","text":" Fully customizable colors and borders"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"abc","emoji":"🔤"}},{"type":"text","text":" Framer Font controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"triangular_ruler","emoji":"📐"}},{"type":"text","text":" Adjustable spacing, padding, radius, and width"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"zap","emoji":"⚡"}},{"type":"text","text":" Configurable spring stiffness, damping, and mass"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"clapper","emoji":"🎬"}},{"type":"text","text":" Custom opening and closing animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"wheelchair","emoji":"♿"}},{"type":"text","text":" Reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"keyboard","emoji":"⌨"}},{"type":"text","text":" Keyboard support with Enter and Space"}]},{"type":"paragraph"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Customize","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Make the interaction match your design system directly from the Framer property panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Customize the FAQ content, typography, colors, borders, shadows, spacing, corner radius, icon, fisheye intensity, cursor range, spring physics, hover movement, active scale, reveal blur, opening and closing animations, activation mode, reduced motion, and keyboard behavior."}]},{"type":"paragraph","content":[{"type":"text","text":"No code changes are required for the standard customization."}]},{"type":"paragraph","content":[{"type":"text","text":"Support","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Need help customizing Fisheye FAQ or integrating it into your Framer project?"}]},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"@","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/karimsaif0?utm_source=chatgpt.com","target":"_blank"}}]},{"type":"text","text":"karimsaif0 ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://x.com/karimsaif0","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Email:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]}]}]},"introduction":"A dynamic FAQ accordion","slug":"fish-eye-accordion","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0aef1-fc02-70dc-ad59-14fe8c623104.png","metadata":{"tint":{"h":0,"s":0,"l":20},"width":1179,"height":769}}],"post":null,"createdAt":"2026-09-17T10:39:38.314Z","updatedAt":"2026-09-17T10:56:24.210Z","publishedAt":"2026-09-17T10:39:38.311Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://fisheyefaq.framer.website/","price":"5","paymentUrl":"https://karimsaif.lemonsqueezy.com/checkout/buy/63239c76-5ff5-4b11-af6c-05d44025644c","workshop":false,"categories":[{"id":"cf876fb8-579b-4a79-8604-b7feed61bcb0","name":"Accordions","slug":"accordions"}],"lastSaveId":"wfuXB1AegMuG90nlV576","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-17T10:39:39.079Z","updatedAt":"2026-09-17T10:39:39.079Z"},{"id":"01a0aa21-499d-7668-a3cd-a50e77bcdc0c","title":null,"body":"

I just shipped Thread Cards for Framer.

Instead of static cards sitting next to each other, Thread Cards turns them into an interactive system.

The cards respond to the cursor, attract toward each other, lift on interaction, and connect through animated elastic threads with customizable flow, gravity, noise, glow, and activation effects.

It’s built for creative websites, portfolios, agencies, SaaS products, and anyone who wants their card sections to feel more alive without sacrificing customization.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I just shipped "},{"type":"text","text":"Thread Cards","marks":[{"type":"bold"}]},{"type":"text","text":" for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Instead of static cards sitting next to each other, Thread Cards turns them into an interactive system."}]},{"type":"paragraph","content":[{"type":"text","text":"The cards respond to the cursor, attract toward each other, lift on interaction, and connect through animated elastic threads with customizable flow, gravity, noise, glow, and activation effects."}]},{"type":"paragraph","content":[{"type":"text","text":"It’s built for creative websites, portfolios, agencies, SaaS products, and anyone who wants their card sections to feel more alive without sacrificing customization."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"NUOGcFs0r4YR3MNQCFXd","resolved":true,"title":"Thread Cards","body":"$66","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thread Cards turns a simple card grid into a living interactive system. Cards physically respond to the cursor, attract toward each other, lift on hover, and connect through animated elastic threads that bend, flow, and react in real time."}]},{"type":"paragraph","content":[{"type":"text","text":"Designed for modern Framer websites, portfolios, agencies, creative studios, SaaS products, and interactive landing pages that need something more dynamic than a traditional card layout."}]},{"type":"customHeading","content":[{"type":"text","text":"Preview"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"https://threadcards.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://threadcards.framer.website/","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"Great For"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agency websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio and personal websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Design studios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Digital products and SaaS"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative development websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Case study sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Services and capability sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental and motion-focused websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern dark UI layouts"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive physical-style thread connections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive grid, horizontal, and vertical layouts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grid, horizontal, and vertical connection modes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cursor-based card movement"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Magnetic card attraction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Elastic card movement with adjustable tension and damping"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated thread sag and noise"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover lift and scale effects"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated active thread reveal"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Flow particles traveling along active threads"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Configurable thread glow"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom active-thread colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional card background images"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image reveal and image zoom effects"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive mobile columns"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully customizable card content"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Up to 12 cards"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Keyboard-accessible card interactions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static renderer support for Framer"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive sizing with ResizeObserver"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optimized animation handling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom colors, spacing, radius, and typography styling"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Support"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Need help setting up Thread Cards or have a question about customization?"}]},{"type":"paragraph","content":[{"type":"text","text":"Reach out anytime:"}]},{"type":"paragraph","content":[{"type":"text","text":"X: "},{"type":"text","text":"https://x.com/karimsaif0","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/karimsaif0","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Email: "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]}]}]},"introduction":"Elastic threads that bend","slug":"thread-cards","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0aa20-e135-72ca-8073-77d471705710.png","metadata":{"tint":{"h":240,"s":40,"l":16},"width":1185,"height":774}}],"post":null,"createdAt":"2026-09-16T12:11:42.762Z","updatedAt":"2026-09-16T12:23:11.050Z","publishedAt":"2026-09-16T12:11:42.759Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://threadcards.framer.website/","price":"6","paymentUrl":"https://karimsaif.lemonsqueezy.com/checkout/buy/67bbbb4e-6b49-4525-8baa-77cdd184ba3f","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"gExvtz1hb4sprL5bT0if","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-16T12:11:43.390Z","updatedAt":"2026-09-16T12:11:43.390Z"},{"id":"01a0a532-e34d-700a-9f47-0cf5184adf00","title":null,"body":"$67","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I noticed something that felt surprisingly overlooked in the Framer wedding template space: "},{"type":"text","text":"(Sound on ","marks":[{"type":"bold"}]},{"type":"emoji","attrs":{"name":"loud_sound","emoji":"🔊"}},{"type":"text","text":")","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Most wedding websites are built for English, but love stories aren’t limited to one language.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"So I built "},{"type":"text","text":"Wedding Story","marks":[{"type":"bold"}]},{"type":"text","text":" a fully bilingual wedding website template for Framer, designed from the ground up for "},{"type":"text","text":"English (LTR) and Arabic (RTL)","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"It’s not just translated text. The entire experience adapts:"}]},{"type":"paragraph","content":[{"type":"text","text":"→ Proper RTL mirrored layouts "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Dedicated Arabic typography "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Live wedding countdown "}]},{"type":"paragraph","content":[{"type":"text","text":"→ RSVP system "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Built-in music player "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Full love-story timeline "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Fully customizable in Framer"}]},{"type":"paragraph","content":[{"type":"text","text":"Built for "},{"type":"text","text":"couples, wedding planners, and designers","marks":[{"type":"bold"}]},{"type":"text","text":" who want something beautiful and polished out of the box — without sacrificing flexibility."}]},{"type":"paragraph","content":[{"type":"text","text":"I wanted to make a wedding template that feels equally intentional in both languages."}]},{"type":"paragraph","content":[{"type":"text","text":"Take a look → "}]},{"type":"paragraph","content":[{"type":"text","text":"Would love to know what you think. "},{"type":"emoji","attrs":{"name":"ring","emoji":"💍"}}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"73154","resolved":true,"title":"Wedding Story RTLTR","body":"$68","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Wedding Story","marks":[{"type":"bold"}]},{"type":"text","text":" is a romantic, fully responsive wedding website template built entirely in Framer. It's designed to give couples a beautiful, modern place to share their story, countdown to the big day, collect RSVPs, and keep guests informed all wrapped in warm, editorial-style visuals with subtle motion throughout. Every section, from the hero countdown to the closing thank-you page, is built with clean, reusable components so you can make it your own in minutes, not hours."}]},{"type":"paragraph","content":[{"type":"text","text":"Live Preview:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"English: "},{"type":"text","text":"https://weddingstoryday.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://weddingstoryday.framer.website/","target":"_blank"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Arabic (RTL): "},{"type":"text","text":"https://weddingstoryday.framer.website/home-ar","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://weddingstoryday.framer.website/home-ar","target":"_blank"}}]}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Great For","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Couples building their own wedding website without touching code"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Wedding planners offering a fast, polished website option to clients"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Framer designers/freelancers looking for a premium wedding template to customize and resell for a client"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Bilingual couples or Arabic-speaking audiences who need a proper RTL experience, not just a translated layout"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Pages Included (10 total full English + Arabic)","marks":[{"type":"bold"}]}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Home","marks":[{"type":"bold"}]},{"type":"text","text":" "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Our Story","marks":[{"type":"bold"}]},{"type":"text","text":" "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"RSVP","marks":[{"type":"bold"}]},{"type":"text","text":" "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"You're In","marks":[{"type":"bold"}]},{"type":"text","text":" "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"404","marks":[{"type":"bold"}]},{"type":"text","text":" "}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph","content":[{"type":"text","text":"(Each page ships in both English and Arabic 5 pages × 2 languages = 10 total.)","marks":[{"type":"italic"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Languages & Direction","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"English","marks":[{"type":"bold"}]},{"type":"text","text":" full LTR layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Arabic","marks":[{"type":"bold"}]},{"type":"text","text":" full RTL layout, mirrored automatically "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"One-click language switcher in the nav"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dedicated Arabic typograph"}]},{"type":"paragraph"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"tada","emoji":"🎉"}},{"type":"text","text":" Live countdown timer to the wedding date"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"musical_note","emoji":"🎵"}},{"type":"text","text":" Background music player with a custom playlist (bride's song / groom's song / vintage turntable player)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"love_letter","emoji":"💌"}},{"type":"text","text":" RSVP form attendance, guest count, dietary requirements, free-text message"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"camera_flash","emoji":"📸"}},{"type":"text","text":" Photo gallery / moments section"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"ring","emoji":"💍"}},{"type":"text","text":" Our Story full love-story timeline page"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"spiral_calendar","emoji":"🗓"}},{"type":"text","text":" Day schedule / timeline (arrival, ceremony, dinner, dancing)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"round_pushpin","emoji":"📍"}},{"type":"text","text":" Venue section with map link"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"dress","emoji":"👗"}},{"type":"text","text":" Dress code guide"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"love_letter","emoji":"💌"}},{"type":"text","text":" Closing \"thank you\" section + dedicated confirmation page"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}},{"type":"text","text":" Scroll animations and decorative motion components (floral ornaments, film strip, floating hearts, flower drift, text reveal effects)"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Support","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"X (Twitter): "},{"type":"text","text":"@karimsaif0","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/karimsaif0","target":"_blank"}},{"type":"bold"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Email: "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}},{"type":"bold"}]}]}]}]}]},"introduction":"Couples a beautiful, modern place","slug":"wedding-story-rtltr","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/sARTOpQ5WA6EUAAcslB54rY7DvDR9uS3abEoB57XTto.m3u8","metadata":{"posterUrl":"https://image.mux.com/sARTOpQ5WA6EUAAcslB54rY7DvDR9uS3abEoB57XTto/thumbnail.webp?time=74.333","aspectRatio":"4:3","duration":84.9}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0a530-1519-753c-9bcf-971badd4f7d8.png","metadata":{"tint":{"h":30,"s":18,"l":33},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0a530-152b-765b-97d9-402d62171bbd.png","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0a530-14fd-7049-988c-2384196e4271.png","metadata":{"tint":{"h":0,"s":53,"l":66},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0a530-16a6-71a6-b3ac-45e49440c0e1.png","metadata":{"tint":{"h":0,"s":53,"l":66},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-15T13:12:50.108Z","updatedAt":"2026-09-16T12:17:55.910Z","publishedAt":"2026-09-15T13:12:50.095Z","featuredAt":null,"approvedAt":null,"type":"template","attributes":{"price":"99","paymentUrl":"https://karimsaif.lemonsqueezy.com/checkout/buy/7b238c58-a39d-4e41-9644-1460a5d841c2","remixUrl":null,"previewUrl":"https://weddingstoryday.framer.website/","categories":[{"id":17,"name":"Photography","slug":"photography"},{"id":274,"name":"Web","slug":"web-design"},{"id":281,"name":"Publishing","slug":"publishing"},{"id":293,"name":"Weddings","slug":"weddings"},{"id":18,"name":"Radio & Podcast","slug":"radio-and-podcast"}],"styles":[],"mainCategory":{"id":280,"name":"Wellness","slug":"wellness"},"features":[{"id":1,"name":"Appear Effects","slug":"appear-effects"},{"id":18,"name":"Scroll Effects","slug":"scroll-effects"},{"id":19,"name":"Localization","slug":"localization"},{"id":23,"name":"Rich Media","slug":"rich-media"},{"id":25,"name":"Custom Cursors","slug":"custom-cursors"},{"id":30,"name":"Forms","slug":"forms"},{"id":32,"name":"Layout Templates","slug":"layout-templates"},{"id":35,"name":"Text Effects","slug":"text-effects"},{"id":36,"name":"3D Transforms","slug":"3d-transforms"},{"id":37,"name":"Code Components","slug":"code-components"},{"id":38,"name":"P3 Colors","slug":"p3-colors"},{"id":40,"name":"Variable Fonts","slug":"variable-fonts"},{"id":41,"name":"Vector Sets","slug":"vector-sets"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":4},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-09-15T13:16:01.868Z","createdAt":"2026-09-15T13:12:50.765Z","updatedAt":"2026-09-15T13:16:01.868Z"},{"id":"01a09fa9-0b05-709a-98d0-1aa0ae524ba9","title":null,"body":"

I just released Magnetic Cards for Framer 🧲

A card grid that responds to your cursor instead of simply sitting on the page.

The interaction combines magnetic attraction, smooth spring physics, subtle rotation and scaling, and an optional card-to-card repulsion system to make layouts feel more tactile and alive.

You can customize everything directly in Framer, including:

• Magnetic strength & radius

• Spring & damping

• Rotation & scale

• Hover, click, or always activation

• Magnetic grid repulsion

• Custom cursor

• Card layout & styling

• Images

• Reduced motion

It’s designed for portfolios, agencies, product showcases, case studies, and interactive landing pages.

Preview:

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I just released "},{"type":"text","text":"Magnetic Cards for Framer","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"emoji","attrs":{"name":"magnet","emoji":"🧲"}}]},{"type":"paragraph","content":[{"type":"text","text":"A card grid that responds to your cursor instead of simply sitting on the page."}]},{"type":"paragraph","content":[{"type":"text","text":"The interaction combines magnetic attraction, smooth spring physics, subtle rotation and scaling, and an optional card-to-card repulsion system to make layouts feel more tactile and alive."}]},{"type":"paragraph","content":[{"type":"text","text":"You can customize everything directly in Framer, including:"}]},{"type":"paragraph","content":[{"type":"text","text":"• Magnetic strength & radius "}]},{"type":"paragraph","content":[{"type":"text","text":"• Spring & damping "}]},{"type":"paragraph","content":[{"type":"text","text":"• Rotation & scale "}]},{"type":"paragraph","content":[{"type":"text","text":"• Hover, click, or always activation "}]},{"type":"paragraph","content":[{"type":"text","text":"• Magnetic grid repulsion "}]},{"type":"paragraph","content":[{"type":"text","text":"• Custom cursor "}]},{"type":"paragraph","content":[{"type":"text","text":"• Card layout & styling "}]},{"type":"paragraph","content":[{"type":"text","text":"• Images "}]},{"type":"paragraph","content":[{"type":"text","text":"• Reduced motion"}]},{"type":"paragraph","content":[{"type":"text","text":"It’s designed for portfolios, agencies, product showcases, case studies, and interactive landing pages."}]},{"type":"paragraph","content":[{"type":"text","text":"Preview:"}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"JLKImgZj0Okc8VQy7vIl","resolved":true,"title":"Magnetic Cards","body":"$69","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Magnetic Cards"}]},{"type":"paragraph","content":[{"type":"text","text":"Turn a simple card grid into a responsive, interactive experience with "},{"type":"text","text":"Magnetic Cards","marks":[{"type":"bold"}]},{"type":"text","text":" for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Each card reacts naturally to the pointer, creating a magnetic pull that makes the entire grid feel tactile and alive. Cards can subtly translate, rotate, and scale toward the cursor, while an optional magnetic grid adds gentle repulsion between nearby cards for an even more dynamic interaction."}]},{"type":"paragraph","content":[{"type":"text","text":"Preview:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"https://magneticcards.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://magneticcards.framer.website/","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"Great for"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio projects"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agency websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Designer portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Case studies"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Team and profile sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Service cards"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Feature grids"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Digital products"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental and motion-focused websites"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":1}},{"type":"customHeading","content":[{"type":"text","text":"Magnetic Interaction"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Cards are attracted toward the pointer based on distance and configurable magnetic strength. The effect smoothly falls off as the pointer moves away."}]},{"type":"customHeading","content":[{"type":"text","text":"Spring-Based Motion"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Smooth spring and damping controls create natural movement instead of rigid or instant transformations."}]},{"type":"customHeading","content":[{"type":"text","text":"Position, Rotation & Scale"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Cards can translate toward the cursor while subtly rotating and scaling for a more tactile interaction."}]},{"type":"customHeading","content":[{"type":"text","text":"Customizable Magnetic Radius"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Control how far the pointer can influence cards, from a focused interaction to a large magnetic field."}]},{"type":"customHeading","content":[{"type":"text","text":"Multiple Activation Modes"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Choose between:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover","marks":[{"type":"bold"}]},{"type":"text","text":" activate while the pointer is inside the component."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Click","marks":[{"type":"bold"}]},{"type":"text","text":" toggle the magnetic interaction with a click or keyboard."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Always","marks":[{"type":"bold"}]},{"type":"text","text":" keep the interaction active whenever the pointer is inside."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Support"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" @karimsaif "},{"type":"text","text":"https://x.com/karimsaif0","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/karimsaif0","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Email:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"I’m happy to help with setup, customization, bugs, or questions about using the component in your Framer project."}]}]},"introduction":"Cards can subtly translate,rotate","slug":"magnetic-cards","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a09fa8-0b59-72d9-be7e-a85e516ed4ed.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1190,"height":789}}],"post":null,"createdAt":"2026-09-14T11:24:10.271Z","updatedAt":"2026-09-16T12:39:05.865Z","publishedAt":"2026-09-14T11:24:10.268Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://magneticcards.framer.website/","price":"6","paymentUrl":"https://karimsaif.lemonsqueezy.com/checkout/buy/8bcaabaa-a914-4e81-b4c9-0d19b3d3f548","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"1wbynsBXgxER0bgZoCaS","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":6},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-14T11:24:10.885Z","updatedAt":"2026-09-14T11:24:10.885Z"},{"id":"01a09aaa-0fef-772e-a580-4078bf380f1e","title":null,"body":"

Just launched Morph Cards for Framer.

I wanted to create a card interaction that felt more like a transformation than a traditional hover effect.

When you interact with a card, the entire layout responds:

• The active card expands

• Neighboring cards compress

• The shape changes

• The card lifts

• The image zooms

• Content smoothly appears

Everything is customizable directly inside Framer, including card proportions, radius, image scaling, typography, motion, easing, colors, and borders.

It's designed for portfolios, creative agencies, editorial websites, product showcases, and experimental landing pages.

Try Morph Cards:

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just launched "},{"type":"text","text":"Morph Cards","marks":[{"type":"bold"}]},{"type":"text","text":" for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"I wanted to create a card interaction that felt more like a transformation than a traditional hover effect."}]},{"type":"paragraph","content":[{"type":"text","text":"When you interact with a card, the entire layout responds:"}]},{"type":"paragraph","content":[{"type":"text","text":"• The active card expands "}]},{"type":"paragraph","content":[{"type":"text","text":"• Neighboring cards compress "}]},{"type":"paragraph","content":[{"type":"text","text":"• The shape changes "}]},{"type":"paragraph","content":[{"type":"text","text":"• The card lifts "}]},{"type":"paragraph","content":[{"type":"text","text":"• The image zooms "}]},{"type":"paragraph","content":[{"type":"text","text":"• Content smoothly appears"}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is customizable directly inside Framer, including card proportions, radius, image scaling, typography, motion, easing, colors, and borders."}]},{"type":"paragraph","content":[{"type":"text","text":"It's designed for portfolios, creative agencies, editorial websites, product showcases, and experimental landing pages."}]},{"type":"paragraph","content":[{"type":"text","text":"Try Morph Cards:"}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"hfj1LGTn8XQ7L8DiPmPo","resolved":true,"title":"Morph Cards","body":"$6a","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Morph Cards","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Create fluid, shape-driven card interactions where every card transforms as you explore the gallery."}]},{"type":"paragraph","content":[{"type":"text","text":"Morph Cards goes beyond a simple hover effect. When a card becomes active, it smoothly expands, changes its proportions, lifts, rounds its corners, zooms its image, and reveals its content while the surrounding cards compress around it."}]},{"type":"paragraph","content":[{"type":"text","text":"The result is a cinematic, editorial-style card layout designed for modern Framer websites."}]},{"type":"paragraph","content":[{"type":"text","text":"Preview"}]},{"type":"paragraph","content":[{"type":"text","text":"https://morphcards.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://morphcards.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Great for","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agency websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio projects"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Photography websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Architecture and interior design"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fashion and editorial websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Case study sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Art and culture websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS feature showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental Framer websites"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shape-driven card morphing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Active card expansion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Inactive card compression"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Independent active and inactive heights"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable card proportions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Active card lift animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic border-radius transitions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image zoom on activation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth image scaling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated content reveal"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional descriptions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom typography with Framer Font controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom easing presets"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable animation duration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom overlay color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom title and description colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional card borders"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable card spacing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Up to 8 editable cards"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image controls for every card"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Keyboard navigation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Focus states"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static renderer support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lightweight CSS-based animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"No external animation libraries"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive Framer layout support"}]}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Support","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Need help customizing Morph Cards or using it in your Framer project?"}]},{"type":"paragraph","content":[{"type":"text","text":"Email: "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"X: "},{"type":"text","text":"https://x.com/karimsaif0","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/karimsaif0","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"I'm happy to help with setup, customization, and usage questions."}]}]},"introduction":"Smoothly expands","slug":"morph-cards","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a09aa9-72e2-770e-b77e-d19a128860f6.png","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1189,"height":783}}],"post":null,"createdAt":"2026-09-13T12:07:10.936Z","updatedAt":"2026-09-16T12:39:55.434Z","publishedAt":"2026-09-13T12:07:10.932Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://morphcards.framer.website/","price":"6","paymentUrl":"https://karimsaif.lemonsqueezy.com/checkout/buy/092e98fd-fbe5-42a3-bfa0-af147aa51e91","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"VVOUDDt4n4x5z203zHXD","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-13T12:07:11.599Z","updatedAt":"2026-09-13T12:07:11.599Z"},{"id":"01a09734-a3c8-70a1-8ffd-406ccdc0e9d9","title":null,"body":"

I just released Blur Carousel for Framer.

I wanted to create an image carousel that felt more like a visual transition than a traditional slider.

Blur Carousel includes:

• Smooth blur transitions

• Horizontal and vertical layouts

• 3D directional tilt

• Mouse and touch swipe gestures

• Autoplay

• Keyboard navigation

• Responsive images

• Custom animation and easing

• Adjustable blur, radius and tilt

• Custom typography and title positioning

• Fully editable Framer Property Controls

It's designed for creative portfolios, photography, fashion, architecture, agencies, product showcases, and editorial websites.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I just released "},{"type":"text","text":"Blur Carousel","marks":[{"type":"bold"}]},{"type":"text","text":" for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"I wanted to create an image carousel that felt more like a visual transition than a traditional slider."}]},{"type":"paragraph","content":[{"type":"text","text":"Blur Carousel","marks":[{"type":"bold"}]},{"type":"text","text":" includes:"}]},{"type":"paragraph","content":[{"type":"text","text":"• Smooth blur transitions "}]},{"type":"paragraph","content":[{"type":"text","text":"• Horizontal and vertical layouts "}]},{"type":"paragraph","content":[{"type":"text","text":"• 3D directional tilt "}]},{"type":"paragraph","content":[{"type":"text","text":"• Mouse and touch swipe gestures "}]},{"type":"paragraph","content":[{"type":"text","text":"• Autoplay "}]},{"type":"paragraph","content":[{"type":"text","text":"• Keyboard navigation "}]},{"type":"paragraph","content":[{"type":"text","text":"• Responsive images "}]},{"type":"paragraph","content":[{"type":"text","text":"• Custom animation and easing "}]},{"type":"paragraph","content":[{"type":"text","text":"• Adjustable blur, radius and tilt "}]},{"type":"paragraph","content":[{"type":"text","text":"• Custom typography and title positioning "}]},{"type":"paragraph","content":[{"type":"text","text":"• Fully editable Framer Property Controls"}]},{"type":"paragraph","content":[{"type":"text","text":"It's designed for creative portfolios, photography, fashion, architecture, agencies, product showcases, and editorial websites."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"g94d1AKzO0jglaomMVvj","resolved":true,"title":"Blur Carousel","body":"$6b","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A smooth, interactive image carousel for Framer with cinematic blur transitions, directional movement, swipe gestures, autoplay, and customizable typography."}]},{"type":"paragraph","content":[{"type":"text","text":"Blur Carousel is designed for portfolios, fashion websites, creative agencies, architecture, photography, product showcases, and editorial layouts where you want image navigation to feel more dynamic than a standard slider."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Preview","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Live Preview — Blur Carousel","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://blurcarouseldegree.framer.website","target":"_blank"}}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Great for","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Photography websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fashion and editorial websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Architecture portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Agency websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Art direction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Gallery sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Minimal and premium websites"}]}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Customize everything","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Use Framer's property controls to easily customize the component without touching the code."}]},{"type":"paragraph","content":[{"type":"text","text":"Change the images, titles, movement direction, blur strength, border radius, 3D tilt, animation speed, easing, autoplay, navigation arrows, swipe sensitivity, typography, title position, colors, and more."}]},{"type":"paragraph","content":[{"type":"text","text":"Build a carousel that matches your brand instead of adapting your design around a fixed component."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"More components & templates","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Explore more Framer components, templates, UI resources, and design products by Karim Saif:"}]},{"type":"paragraph","content":[{"type":"text","text":"Karim Saif — Components & Templates","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://karimsaif.lemonsqueezy.com","target":"_blank"}}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Support","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Have a question, found a bug, or need help customizing the component?"}]},{"type":"paragraph","content":[{"type":"text","text":"Email: "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmaul.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"You can also reach me on X for updates, feedback, and new releases."}]},{"type":"paragraph","content":[{"type":"text","text":"Made by "},{"type":"mention","attrs":{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","slug":"karim-saif","label":"Karim Saif","mentionSuggestionChar":"@"}},{"type":"text","text":" ."}]}]},"introduction":"Cinematic blur transitions","slug":"blur-carousel","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a09733-9c8c-73de-85d6-28fdee83f75e.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1186,"height":780}}],"post":null,"createdAt":"2026-09-12T20:00:03.925Z","updatedAt":"2026-09-16T12:40:51.732Z","publishedAt":"2026-09-12T20:00:03.917Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://blurcarouseldegree.framer.website/","price":"6","paymentUrl":"https://karimsaif.lemonsqueezy.com/checkout/buy/16ece757-bbcf-473c-a5b7-bdc1ea0a77d2","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"XJb43efxrIEOR3B7olYD","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-09-12T20:00:04.552Z","updatedAt":"2026-09-12T20:00:04.552Z"},{"id":"01a09525-f6b8-7158-9794-d2941457fb5d","title":null,"body":"

🚀 New Framer component: Planetary Carousel 🪐

I wanted to create a gallery that feels less like a traditional carousel and more like an interactive 3D object.

So I built Planetary Carousel.

Images orbit around an invisible center with:

→ 3D perspective

→ Drag interaction

→ Momentum physics

→ Autoplay

→ Adjustable depth & tilt

→ Active card scaling

→ Depth-of-field blur

→ Dynamic shadows

→ Responsive sizing

→ Up to 12 images

The goal was simple: make image galleries feel more physical and immersive while keeping the component easy to customize inside Framer.

Great for portfolios, creative agencies, photography, product showcases, and interactive landing pages.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}},{"type":"text","text":" New Framer component: Planetary Carousel "},{"type":"emoji","attrs":{"name":"ringed_planet","emoji":"🪐"}}]},{"type":"paragraph","content":[{"type":"text","text":"I wanted to create a gallery that feels less like a traditional carousel and more like an interactive 3D object."}]},{"type":"paragraph","content":[{"type":"text","text":"So I built Planetary Carousel."}]},{"type":"paragraph","content":[{"type":"text","text":"Images orbit around an invisible center with:"}]},{"type":"paragraph","content":[{"type":"text","text":"→ 3D perspective "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Drag interaction "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Momentum physics "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Autoplay "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Adjustable depth & tilt "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Active card scaling "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Depth-of-field blur "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Dynamic shadows "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Responsive sizing "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Up to 12 images"}]},{"type":"paragraph","content":[{"type":"text","text":"The goal was simple: make image galleries feel more physical and immersive while keeping the component easy to customize inside Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Great for portfolios, creative agencies, photography, product showcases, and interactive landing pages."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"KNKJwnGXiQdhKEZjK0OQ","resolved":true,"title":"Planetary Carousel","body":"$6c","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"A 3D image carousel that orbits like a planet."}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Turn a simple image gallery into a cinematic 3D experience."}]},{"type":"paragraph","content":[{"type":"text","text":"Planetary Carousel","marks":[{"type":"bold"}]},{"type":"text","text":" places your images around an invisible orbital path, creating a dynamic depth effect where cards move toward and away from the viewer as they rotate."}]},{"type":"paragraph","content":[{"type":"text","text":"Drag to explore the orbit, release for natural momentum, or let autoplay continuously rotate the gallery."}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for portfolios, creative websites, photography, product showcases, agency sites, and interactive landing pages."}]},{"type":"customHeading","content":[{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}},{"type":"text","text":" Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"ringed_planet","emoji":"🪐"}},{"type":"text","text":" "},{"type":"text","text":"3D planetary orbit","marks":[{"type":"bold"}]},{"type":"text","text":" — Images follow a curved orbital path with realistic depth."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"computer_mouse","emoji":"🖱"}},{"type":"text","text":" "},{"type":"text","text":"Drag to rotate","marks":[{"type":"bold"}]},{"type":"text","text":" — Grab and rotate the carousel naturally."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"dash","emoji":"💨"}},{"type":"text","text":" "},{"type":"text","text":"Momentum physics","marks":[{"type":"bold"}]},{"type":"text","text":" — The orbit continues moving smoothly after you release."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"arrows_counterclockwise","emoji":"🔄"}},{"type":"text","text":" "},{"type":"text","text":"Autoplay","marks":[{"type":"bold"}]},{"type":"text","text":" — Automatically rotate the carousel when idle."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"left_right_arrow","emoji":"↔"}},{"type":"text","text":" "},{"type":"text","text":"Direction control","marks":[{"type":"bold"}]},{"type":"text","text":" — Choose clockwise or counterclockwise rotation."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"dart","emoji":"🎯"}},{"type":"text","text":" "},{"type":"text","text":"Active card scaling","marks":[{"type":"bold"}]},{"type":"text","text":" — The front-facing image can stand out automatically."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"fog","emoji":"🌫"}},{"type":"text","text":" "},{"type":"text","text":"Depth blur","marks":[{"type":"bold"}]},{"type":"text","text":" — Add depth-of-field blur to cards farther from the viewer."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"ice_cube","emoji":"🧊"}},{"type":"text","text":" "},{"type":"text","text":"3D perspective","marks":[{"type":"bold"}]},{"type":"text","text":" — Control the strength of the camera perspective."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"triangular_ruler","emoji":"📐"}},{"type":"text","text":" "},{"type":"text","text":"Adjustable orbit","marks":[{"type":"bold"}]},{"type":"text","text":" — Change the orbit radius and vertical compression."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"control_knobs","emoji":"🎛"}},{"type":"text","text":" "},{"type":"text","text":"Tilt control","marks":[{"type":"bold"}]},{"type":"text","text":" — Angle the entire orbital plane."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"framed_picture","emoji":"🖼"}},{"type":"text","text":" "},{"type":"text","text":"Up to 12 images","marks":[{"type":"bold"}]},{"type":"text","text":" — Easily add, remove, and reorder images."}]},{"type":"paragraph"}]}]},{"type":"customHeading","content":[{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}},{"type":"text","text":" Great For"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Portfolio websites","marks":[{"type":"bold"}]},{"type":"text","text":" Showcase selected projects or case studies with a more immersive presentation."}]},{"type":"paragraph","content":[{"type":"text","text":"Photography","marks":[{"type":"bold"}]},{"type":"text","text":" Create a cinematic gallery that makes every image feel interactive."}]},{"type":"paragraph","content":[{"type":"text","text":"Creative agencies","marks":[{"type":"bold"}]},{"type":"text","text":" Add an eye-catching visual section to your homepage."}]},{"type":"paragraph","content":[{"type":"text","text":"Product showcases","marks":[{"type":"bold"}]},{"type":"text","text":" Present products or concepts with depth and movement."}]},{"type":"paragraph","content":[{"type":"text","text":"Fashion & editorial","marks":[{"type":"bold"}]},{"type":"text","text":" Build a premium, art-directed image experience."}]},{"type":"paragraph","content":[{"type":"text","text":"Landing pages","marks":[{"type":"bold"}]},{"type":"text","text":" Use the orbit as a hero visual or interactive centerpiece."}]},{"type":"customHeading","attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Have a question, found a bug, or want to suggest an improvement?"}]},{"type":"paragraph","content":[{"type":"text","text":"Support:","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" @karimsaif0"}]},{"type":"paragraph","content":[{"type":"text","text":"I'd love to see what you build with it."}]}]},"introduction":"3D image carousel that orbits","slug":"planetary-carousel","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a09525-5728-775e-b2b3-1e7454559f22.png","metadata":{"tint":{"h":210,"s":70,"l":60},"width":1182,"height":787}}],"post":null,"createdAt":"2026-09-12T10:24:47.690Z","updatedAt":"2026-09-16T12:24:49.354Z","publishedAt":"2026-09-12T10:24:47.681Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://planetarycarousel.framer.website/","price":"6","paymentUrl":"https://karimsaif.lemonsqueezy.com/checkout/buy/93a5d7d1-80f4-4bf8-96bb-895bf71fc28d","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"jsq0Au2BD1pcHdAVrb7r","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-12T10:24:48.312Z","updatedAt":"2026-09-12T10:24:48.312Z"},{"id":"01a09074-12eb-7023-855a-01e8c2213c07","title":null,"body":"

Your CTA button just got a pixel upgrade.

Meet Pixel CTA Button, a retro-inspired @framer component with a dynamic pixel perimeter that comes alive on hover.

6 interactive presets.

5 customizable accent colors.

Smooth, performance-focused animations.

Random Jitter. Pixel Burst. Pixel Wave. Pixel Chase. And more.

Make your CTAs feel less static.

Make them impossible to ignore.

Grab it

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Your "},{"type":"text","text":"CTA button","marks":[{"type":"bold"}]},{"type":"text","text":" just got a"},{"type":"text","text":" pixel upgrade. ","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Meet Pixel CTA Button, a retro-inspired "},{"type":"text","text":"@framer ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/framer","target":"_blank"}}]},{"type":"text","text":"component with a dynamic pixel perimeter that comes alive on hover. "}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"6 interactive presets. ","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"5 customizable accent colors. ","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Smooth, performance-focused animations. ","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Random Jitter. Pixel Burst. Pixel Wave. Pixel Chase. And more.","marks":[{"type":"bold"}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Make your CTAs feel less static. "}]},{"type":"paragraph","content":[{"type":"text","text":"Make them impossible to ignore."}]},{"type":"paragraph","content":[{"type":"text","text":"Grab it"}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/kQYts00WMDJoDPGwSVMM02XNRcxUuOiApJhtf029029o5qs.m3u8","metadata":{"posterUrl":"https://image.mux.com/kQYts00WMDJoDPGwSVMM02XNRcxUuOiApJhtf029029o5qs/thumbnail.webp?time=9.117","aspectRatio":"4:3","duration":14.983333}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":3},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-11T12:32:01.264Z","updatedAt":"2026-09-11T12:32:01.264Z"},{"id":"01a08daf-caf1-717c-8e53-e2c888ce5355","title":null,"body":"

Does Framer have to put a new breakpoint for iPhone Duo?

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Does Framer have to put a new breakpoint for iPhone Duo?"}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","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":8,"liked":false},"comments":{"count":3},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-10T23:38:23.348Z","updatedAt":"2026-09-10T23:38:23.348Z"},{"id":"01a08aba-f483-72a8-ba72-caff54fd5459","title":null,"body":"

Trying in @Framer

Inspired by @ Apple iPhone Duo concept experimenting with the interaction, motion, and that seamless split-screen feel.

Just testing ideas. More soon.

Created by @Karim Saif

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Trying in @Framer"}]},{"type":"paragraph","content":[{"type":"text","text":"Inspired by "},{"type":"text","text":"@ Apple ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/Apple","target":"_blank"}}]},{"type":"text","text":"iPhone Duo concept experimenting with the interaction, motion, and that seamless split-screen feel. "}]},{"type":"paragraph","content":[{"type":"text","text":"Just testing ideas. More soon."}]},{"type":"paragraph","content":[{"type":"text","text":"Created by "},{"type":"mention","attrs":{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","slug":"karim-saif","label":"Karim Saif","mentionSuggestionChar":"@"}},{"type":"text","text":" "}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/3ZESIhCVI11qMR01CZq02hIb2wCOtv01XLHNe66aqS3UPs.m3u8","metadata":{"posterUrl":"https://image.mux.com/3ZESIhCVI11qMR01CZq02hIb2wCOtv01XLHNe66aqS3UPs/thumbnail.webp?time=16.9","aspectRatio":"4:3","duration":18.583333}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":10,"liked":false},"comments":{"count":4},"reposts":{"count":1,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-10T09:51:43.239Z","updatedAt":"2026-09-10T09:51:43.239Z"},{"id":"01a085df-3843-7500-abd0-c9b13ac26a6b","title":null,"body":"

Most image carousels feel predictable.

So I built one that treats images like a 3D object.

Introducing DNA Carousel for Framer 🧬

Instead of simply sliding images from left to right, each image travels along an opposing DNA-inspired helix.

You can customize:

• 3D depth

• Perspective

• Curve & helix spread

• Rotation & tilt

• Blur & RGB split

• Inertia & snapping

• Autoplay

• Shadows

• Image radius

• Drag interaction

It's designed for creative portfolios, photography, fashion, agencies, editorial websites, and experimental landing pages.

Preview → https://dnacarousel.framer.website/

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Most image carousels feel predictable."}]},{"type":"paragraph","content":[{"type":"text","text":"So I built one that treats images like a 3D object."}]},{"type":"paragraph","content":[{"type":"text","text":"Introducing "},{"type":"text","text":"DNA Carousel for Framer","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"emoji","attrs":{"name":"dna","emoji":"🧬"}}]},{"type":"paragraph","content":[{"type":"text","text":"Instead of simply sliding images from left to right, each image travels along an opposing DNA-inspired helix."}]},{"type":"paragraph","content":[{"type":"text","text":"You can customize:"}]},{"type":"paragraph","content":[{"type":"text","text":"• 3D depth "}]},{"type":"paragraph","content":[{"type":"text","text":"• Perspective "}]},{"type":"paragraph","content":[{"type":"text","text":"• Curve & helix spread "}]},{"type":"paragraph","content":[{"type":"text","text":"• Rotation & tilt "}]},{"type":"paragraph","content":[{"type":"text","text":"• Blur & RGB split "}]},{"type":"paragraph","content":[{"type":"text","text":"• Inertia & snapping "}]},{"type":"paragraph","content":[{"type":"text","text":"• Autoplay "}]},{"type":"paragraph","content":[{"type":"text","text":"• Shadows "}]},{"type":"paragraph","content":[{"type":"text","text":"• Image radius "}]},{"type":"paragraph","content":[{"type":"text","text":"• Drag interaction"}]},{"type":"paragraph","content":[{"type":"text","text":"It's designed for creative portfolios, photography, fashion, agencies, editorial websites, and experimental landing pages."}]},{"type":"paragraph","content":[{"type":"text","text":"Preview → "},{"type":"text","text":"https://dnacarousel.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://dnacarousel.framer.website/","target":"_blank"}}]}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"5URVAa8eyMqVMB3bvzAc","resolved":true,"title":"DNA Carousel","body":"$6d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A cinematic 3D image carousel inspired by the structure and movement of a DNA helix."}]},{"type":"paragraph","content":[{"type":"text","text":"Images travel along two opposing strands, creating a dynamic sense of depth, rotation, perspective, and motion. Drag, swipe, scroll, or use your keyboard to move through the gallery."}]},{"type":"paragraph","content":[{"type":"text","text":"Preview:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"https://dnacarousel.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://dnacarousel.framer.website/","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"Great For"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"DNA Carousel is ideal for:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Photography portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fashion websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Digital agencies"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Art direction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editorial websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Case studies"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental web design"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive galleries"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"It works especially well when you want your images to feel more "},{"type":"text","text":"cinematic and spatial","marks":[{"type":"bold"}]},{"type":"text","text":" than a traditional horizontal carousel."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"dna","emoji":"🧬"}},{"type":"text","text":" DNA-inspired 3D image layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"framed_picture","emoji":"🖼"}},{"type":"text","text":" Add and reorder multiple images"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"computer_mouse","emoji":"🖱"}},{"type":"text","text":" Drag interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"iphone","emoji":"📱"}},{"type":"text","text":" Touch and swipe support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"computer_mouse","emoji":"🖱"}},{"type":"text","text":" Mouse-wheel navigation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"keyboard","emoji":"⌨"}},{"type":"text","text":" Keyboard navigation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"infinity","emoji":"♾"}},{"type":"text","text":" Infinite looping"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"zap","emoji":"⚡"}},{"type":"text","text":" Smooth momentum and inertia"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"dart","emoji":"🎯"}},{"type":"text","text":" Automatic snapping"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"arrow_forward","emoji":"▶"}},{"type":"text","text":" Optional autoplay"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"level_slider","emoji":"🎚"}},{"type":"text","text":" Adjustable autoplay speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"cyclone","emoji":"🌀"}},{"type":"text","text":" Adjustable DNA curve"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"left_right_arrow","emoji":"↔"}},{"type":"text","text":" Adjustable helix spread"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"milky_way","emoji":"🌌"}},{"type":"text","text":" Adjustable 3D depth"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"triangular_ruler","emoji":"📐"}},{"type":"text","text":" Adjustable perspective"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"arrows_counterclockwise","emoji":"🔄"}},{"type":"text","text":" Adjustable rotation and tilt"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"mag","emoji":"🔍"}},{"type":"text","text":" Adjustable blur"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"rainbow","emoji":"🌈"}},{"type":"text","text":" RGB split / chromatic aberration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"new_moon","emoji":"🌑"}},{"type":"text","text":" Adjustable inactive opacity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}},{"type":"text","text":" Optional depth shadows"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"computer_mouse","emoji":"🖱"}},{"type":"text","text":" Optional grab cursor"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"black_square_button","emoji":"🔲"}},{"type":"text","text":" Adjustable image radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"triangular_ruler","emoji":"📐"}},{"type":"text","text":" Fully responsive"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"wheelchair","emoji":"♿"}},{"type":"text","text":" Reduced-motion support"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customize Everything"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Control the visual personality of the carousel directly from Framer."}]},{"type":"customHeading","content":[{"type":"text","text":"Layout"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Adjust:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image Width"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image Height"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Gap"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image Radius"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"3D Motion"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Customize:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Depth"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Curve"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Helix Spread"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Perspective"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Rotation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tilt"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Image Effects"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Fine-tune:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Active Scale"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Inactive Scale"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Blur"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"RGB Split"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Inactive Opacity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shadow"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shadow Strength"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Interaction"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Control:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag Sensitivity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Inertia"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Snap Strength"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Autoplay"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Autoplay Speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grab Cursor"}]}]}]},{"type":"customHeading","attrs":{"level":1}},{"type":"customHeading","content":[{"type":"text","text":"Support"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Need help setting up DNA Carousel, customizing the interaction, or have a question about the component?"}]},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"mention","attrs":{"id":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","slug":"karim-saif","label":"Karim Saif","mentionSuggestionChar":"@"}},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Email:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"I'm happy to help."}]}]},"introduction":"Cinematic 3D image carousel, helix","slug":"dna-carousel","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a085de-68d6-7318-9b0c-5d3a9eee9c6f.png","metadata":{"tint":{"h":60,"s":17,"l":51},"width":1190,"height":787}}],"post":null,"createdAt":"2026-09-09T11:13:13.182Z","updatedAt":"2026-09-09T11:13:13.182Z","publishedAt":"2026-09-09T11:13:13.177Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/DNA-Carousel-EQly5C.js@WI1U7A2mXxPVTGO0LN04","previewUrl":"https://dnacarousel.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"WI1U7A2mXxPVTGO0LN04","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":4},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-09T11:13:13.795Z","updatedAt":"2026-09-09T11:13:13.795Z"},{"id":"01a0800e-4de3-7048-910e-8a25920d2028","title":null,"body":"$6e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I wanted to make typography feel less static."}]},{"type":"paragraph","content":[{"type":"text","text":"So I built "},{"type":"text","text":"Disco Shadow","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"emoji","attrs":{"name":"mirror_ball","emoji":"🪩"}},{"type":"text","text":", an interactive RGB typography effect for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"The idea is simple:"}]},{"type":"paragraph","content":[{"type":"text","text":"Move your cursor and the RGB channels separate based on your movement velocity."}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"red_circle","emoji":"🔴"}},{"type":"text","text":" Red moves against the direction "},{"type":"emoji","attrs":{"name":"green_circle","emoji":"🟢"}},{"type":"text","text":" Green shifts perpendicular "},{"type":"emoji","attrs":{"name":"large_blue_circle","emoji":"🔵"}},{"type":"text","text":" Blue follows the movement"}]},{"type":"paragraph","content":[{"type":"text","text":"Then everything smoothly settles back when you stop."}]},{"type":"paragraph","content":[{"type":"text","text":"The component includes:"}]},{"type":"paragraph","content":[{"type":"text","text":"• Native Framer Font controls"}]},{"type":"paragraph","content":[{"type":"text","text":"• Custom RGB colors "}]},{"type":"paragraph","content":[{"type":"text","text":"• Cursor velocity "}]},{"type":"paragraph","content":[{"type":"text","text":"• Smooth inertia "}]},{"type":"paragraph","content":[{"type":"text","text":"• Adjustable separation"}]},{"type":"paragraph","content":[{"type":"text","text":" • Velocity-driven glow "}]},{"type":"paragraph","content":[{"type":"text","text":"• Reduced-motion support "}]},{"type":"paragraph","content":[{"type":"text","text":"• Responsive canvas rendering "}]},{"type":"paragraph","content":[{"type":"text","text":"• Viewport-aware performance optimization "}]},{"type":"paragraph","content":[{"type":"text","text":"• No external dependencies"}]},{"type":"paragraph","content":[{"type":"text","text":"It works especially well for hero sections, portfolios, experimental websites, music, fashion, and creative agencies."}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"movie_camera","emoji":"🎥"}},{"type":"text","text":" Try the live preview: "}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"8iM95ySERLC11OrTiFHl","resolved":true,"title":"Disco Shadow Text","body":"$6f","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Disco Shadow","marks":[{"type":"bold"}]},{"type":"text","text":" is an interactive RGB typography effect that reacts to your cursor movement. Move faster and the red, green, and blue channels split apart, creating a vibrant chromatic shadow that feels inspired by disco lights, CRT displays, and digital motion graphics."}]},{"type":"customHeading","content":[{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}},{"type":"text","text":" Preview"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"https://discoshadowtext.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://discoshadowtext.framer.website/","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"Great For"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Disco Shadow works especially well for:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero headlines"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Digital agency websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Music and entertainment websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fashion and editorial websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Art and design portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Posters and campaign pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tech and futuristic interfaces"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cursor-reactive experiences"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Use it on a single headline for a subtle effect, or push the settings further for a bold psychedelic RGB distortion."}]},{"type":"customHeading","content":[{"type":"emoji","attrs":{"name":"zap","emoji":"⚡"}},{"type":"text","text":" Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"mirror_ball","emoji":"🪩"}},{"type":"text","text":" Cursor-reactive RGB shadows"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"art","emoji":"🎨"}},{"type":"text","text":" Independent Red, Green, and Blue colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"computer_mouse","emoji":"🖱"}},{"type":"text","text":" Velocity-based movement"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"dash","emoji":"💨"}},{"type":"text","text":" Smooth motion and inertia"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"triangular_ruler","emoji":"📐"}},{"type":"text","text":" Adjustable RGB separation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}},{"type":"text","text":" Maximum separation control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}},{"type":"text","text":" Velocity-driven glow"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"fog","emoji":"🌫"}},{"type":"text","text":" Adjustable glow blur"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"level_slider","emoji":"🎚"}},{"type":"text","text":" Custom opacity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"abc","emoji":"🔤"}},{"type":"text","text":" Native Framer Font controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"straight_ruler","emoji":"📏"}},{"type":"text","text":" Font size and weight controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"writing_hand","emoji":"✍"}},{"type":"text","text":" Letter spacing control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"arrow_up_down","emoji":"↕"}},{"type":"text","text":" Line-height control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"left_right_arrow","emoji":"↔"}},{"type":"text","text":" Text alignment control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"art","emoji":"🎨"}},{"type":"text","text":" Custom text color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"framed_picture","emoji":"🖼"}},{"type":"text","text":" Optional background color and opacity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"iphone","emoji":"📱"}},{"type":"text","text":" Touch-safe interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"wheelchair","emoji":"♿"}},{"type":"text","text":" Reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"eye","emoji":"👁"}},{"type":"text","text":" IntersectionObserver optimization"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"triangular_ruler","emoji":"📐"}},{"type":"text","text":" ResizeObserver support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"desktop_computer","emoji":"🖥"}},{"type":"text","text":" DPR-aware canvas rendering"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"zap","emoji":"⚡"}},{"type":"text","text":" Performance-conscious animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"jigsaw","emoji":"🧩"}},{"type":"text","text":" No external dependencies"}]}]}]},{"type":"customHeading","content":[{"type":"emoji","attrs":{"name":"hammer_and_wrench","emoji":"🛠"}},{"type":"text","text":" Support"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Need help using Disco Shadow or found an issue?"}]},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" @karimsaif "},{"type":"text","text":"https://x.com/karimsaif0","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/karimsaif0","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Email:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Feel free to reach out for questions, bug reports, or feedback."}]}]},"introduction":"RGB typography effect","slug":"disco-shadow-text","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0800d-51f9-7258-8fe4-0ad0817a5f92.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1179,"height":769}}],"post":null,"createdAt":"2026-09-08T08:06:55.622Z","updatedAt":"2026-09-16T12:41:56.195Z","publishedAt":"2026-09-08T08:06:55.619Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://discoshadowtext.framer.website/","price":"6","paymentUrl":"https://karimsaif.lemonsqueezy.com/checkout/buy/e4a7f159-caf4-4cae-ab55-024de04a88a0","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"2sWGhCqNaV9fJyK4dw5P","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-08T08:06:56.228Z","updatedAt":"2026-09-08T08:06:56.228Z"},{"id":"01a07ba4-5249-76de-a48d-68f4f9296a22","title":null,"body":"

What if your typography could react to your cursor? 👀

Meet Shadow Doppelgänger, a cursor-reactive text effect for Framer that brings movement, inertia, blur, stretch, and skew to your typography.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"What if your typography could react to your cursor? "},{"type":"emoji","attrs":{"name":"eyes","emoji":"👀"}}]},{"type":"paragraph","content":[{"type":"text","text":"Meet "},{"type":"text","text":"Shadow Doppelgänger","marks":[{"type":"bold"}]},{"type":"text","text":", a cursor-reactive text effect for Framer that brings movement, inertia, blur, stretch, and skew to your typography."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"mAuYkLZqjLJXHIVp9Rk6","resolved":true,"title":"Shadow Doppelgänger","body":"$70","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Shadow Doppelgänger"}]},{"type":"paragraph","content":[{"type":"text","text":"Bring your typography to life with "},{"type":"text","text":"Shadow Doppelgänger","marks":[{"type":"bold"}]},{"type":"text","text":", a smooth cursor-reactive text effect built for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"The original text stays perfectly in place while a second “ghost” copy follows your cursor with natural delay and inertia. As you move, the ghost reacts dynamically with displacement, velocity, stretching, directional skew, blur, and opacity—creating a fluid and expressive motion effect. When the cursor stops or leaves the component, the ghost smoothly returns to its original position."}]},{"type":"customHeading","content":[{"type":"text","text":"Preview"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"https://xn--doppelgngershadowtext-c2b.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://xn--doppelgngershadowtext-c2b.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Move your cursor over the component and watch the typography come alive."}]},{"type":"paragraph","content":[{"type":"text","text":"The ghost text reacts to your movement with:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cursor-reactive displacement"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth delayed motion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Velocity-based movement"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic horizontal stretching"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Directional skew"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Velocity-reactive blur"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic opacity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth return animation"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Great For"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agencies"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Designer portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive headlines"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Personal websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern product websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative Framer projects"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customize"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Easily customize the effect directly from the Framer properties panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Control:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text content"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Font family, size, weight, spacing, and line height"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Main text color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ghost color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ghost opacity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ghost blur"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Maximum movement distance"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Velocity intensity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Follow delay"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Motion smoothness"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Stretch intensity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Directional skew"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Return speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Blur on/off"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Stretch on/off"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Skew on/off"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Create anything from a subtle premium text interaction to a bold, highly expressive motion effect."}]},{"type":"customHeading","content":[{"type":"text","text":"Support"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"If you need help, have questions, or want to share feedback, feel free to reach out."}]},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" @karimsaif0 "},{"type":"text","text":"Email:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Made with "},{"type":"emoji","attrs":{"name":"yellow_heart","emoji":"💛"}},{"type":"text","text":" by "},{"type":"text","text":"Karim Saif","marks":[{"type":"bold"}]}]}]},"introduction":"Doppelgänger Text","slug":"shadow-doppelg-nger","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a07ba3-41c8-771e-8f70-65b814cfc196.png","metadata":{"tint":{"h":72,"s":31,"l":25},"width":1182,"height":782}}],"post":null,"createdAt":"2026-09-07T11:32:41.031Z","updatedAt":"2026-09-16T12:43:08.714Z","publishedAt":"2026-09-07T11:32:41.017Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://xn--doppelgngershadowtext-c2b.framer.website/","price":"6","paymentUrl":"https://karimsaif.lemonsqueezy.com/checkout/buy/a0bdb7b9-5e40-4d16-ade5-be33d2c34772","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"EOc448NOE6b7jKIGXSi9","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-09-07T11:32:41.677Z","updatedAt":"2026-09-07T11:32:41.677Z"},{"id":"01a07651-74df-7180-bb03-fb5573dd8673","title":null,"body":"

🚀 Paddle Z is trending in @Framer 's Sports section! 🎾

My second template has made it into the Trending Sports section, and I couldn’t have done it without your support. ❤

Thank you to everyone who checked it out, shared it, liked it, and supported my work.

Paddle Z just took #4 in Trending Sports 🏆

If you’re curious, check it out 👇

More experiments coming. ⚡

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}},{"type":"text","text":" Paddle Z is trending in "},{"type":"mention","attrs":{"id":"a7cd9fe6-cf81-4a41-8e93-bca0291dba80","slug":"framer","label":"Framer","mentionSuggestionChar":"@"}},{"type":"text","text":" 's Sports section! "},{"type":"emoji","attrs":{"name":"tennis","emoji":"🎾"}},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"My second template has made it into the Trending Sports section, and I couldn’t have done it without your support. "},{"type":"emoji","attrs":{"name":"heart","emoji":"❤"}},{"type":"text","text":" "}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Thank you to everyone who checked it out, shared it, liked it, and supported my work. "}]},{"type":"paragraph","content":[{"type":"text","text":"Paddle Z just took #4 in Trending Sports "},{"type":"emoji","attrs":{"name":"trophy","emoji":"🏆"}},{"type":"text","text":" "}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"If you’re curious, check it out "},{"type":"emoji","attrs":{"name":"point_down","emoji":"👇"}}]},{"type":"paragraph","content":[{"type":"text","text":"More experiments coming. "},{"type":"emoji","attrs":{"name":"zap","emoji":"⚡"}}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/1ZxyaNJBeaw00gj7pXg9IeDDzB3SpmYLPcbV7zH19jR00.m3u8","metadata":{"posterUrl":"https://image.mux.com/1ZxyaNJBeaw00gj7pXg9IeDDzB3SpmYLPcbV7zH19jR00/thumbnail.webp?time=10.417","aspectRatio":"4:3","duration":11.833333}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":16,"liked":false},"comments":{"count":7},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-06T10:44:04.963Z","updatedAt":"2026-09-06T10:44:04.963Z"},{"id":"01a07117-2c01-74a5-b4a8-9dd0a86123aa","title":null,"body":"

I wanted to make typography feel like it had momentum.

So I built Velocity Shadow, a new interactive Framer component where the shadow responds to your cursor velocity.

Move slowly and the shadow stays subtle.

Move quickly and it stretches in the direction of your movement.

Stop moving and the shadow smoothly loses its momentum.

It comes with 6 preset, Classic, Soft, Chromatic, Electric, Neon, and Ink, plus a Custom mode with detailed controls for velocity, smoothing, blur, opacity, layers, distance, and direction.

I also focused on making it practical for real Framer projects, with reduced-motion support, static-renderer support, viewport-aware animation, and direct DOM animation.

Try it here:

Velocity Shadow Preview

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I wanted to make typography feel like it had momentum."}]},{"type":"paragraph","content":[{"type":"text","text":"So I built "},{"type":"text","text":"Velocity Shadow","marks":[{"type":"bold"}]},{"type":"text","text":", a new interactive Framer component where the shadow responds to your cursor velocity."}]},{"type":"paragraph","content":[{"type":"text","text":"Move slowly and the shadow stays subtle."}]},{"type":"paragraph","content":[{"type":"text","text":"Move quickly and it stretches in the direction of your movement."}]},{"type":"paragraph","content":[{"type":"text","text":"Stop moving and the shadow smoothly loses its momentum."}]},{"type":"paragraph","content":[{"type":"text","text":"It comes with 6 preset, Classic, Soft, Chromatic, Electric, Neon, and Ink, plus a Custom mode with detailed controls for velocity, smoothing, blur, opacity, layers, distance, and direction."}]},{"type":"paragraph","content":[{"type":"text","text":"I also focused on making it practical for real Framer projects, with reduced-motion support, static-renderer support, viewport-aware animation, and direct DOM animation."}]},{"type":"paragraph","content":[{"type":"text","text":"Try it here:"}]},{"type":"paragraph","content":[{"type":"text","text":"Velocity Shadow Preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://velocityshadowtext.framer.website/","target":"_blank"}}]}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"9JRfgUuOgAt8ajufuS46","resolved":true,"title":"Velocity Shadow Text","body":"$71","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Velocity Shadow","marks":[{"type":"bold"}]},{"type":"text","text":" is a dynamic Framer text component that transforms cursor movement into a smooth, directional shadow trail. Move your cursor slowly for a subtle shadow. Move faster and the shadow stretches farther, creating a dramatic motion effect that makes static typography feel alive."}]},{"type":"paragraph","content":[{"type":"text","text":"The effect responds to the "},{"type":"text","text":"velocity and direction of your cursor","marks":[{"type":"bold"}]},{"type":"text","text":", not simply its position. When the cursor stops, the shadow naturally loses momentum and fades back into the text."}]},{"type":"paragraph","content":[{"type":"text","text":"Preview"}]},{"type":"paragraph","content":[{"type":"text","text":"Experience the effect live:"}]},{"type":"paragraph","content":[{"type":"text","text":"Live Preview — Velocity Shadow","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://velocityshadowtext.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Great For","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Velocity Shadow works especially well for:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero headlines"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agency websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product launches"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Digital experiences"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editorial layouts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Art and design portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mouse-interactive sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Bold statement typography"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"It is particularly effective when you want a headline or key piece of typography to feel "},{"type":"text","text":"responsive, energetic, and interactive","marks":[{"type":"bold"}]},{"type":"text","text":" without adding complicated interactions to your Framer project."}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]},{"type":"emoji","attrs":{"name":"computer_mouse","emoji":"🖱"}},{"type":"text","text":" Cursor Velocity Interaction"}]},{"type":"paragraph","content":[{"type":"text","text":"The shadow reacts to how quickly the cursor moves."}]},{"type":"paragraph","content":[{"type":"text","text":"Slow movement → subtle shadow","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"Fast movement → longer shadow","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"Very fast movement → maximum shadow","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"Cursor stops → shadow smoothly fades","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"The direction of the shadow follows the direction of your cursor movement, creating a natural sense of motion."}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"art","emoji":"🎨"}},{"type":"text","text":" 6 Ready-to-Use Presets"}]},{"type":"paragraph","content":[{"type":"text","text":"Choose from several carefully tuned visual styles:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Classic","marks":[{"type":"bold"}]},{"type":"text","text":" — clean and minimal"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Soft","marks":[{"type":"bold"}]},{"type":"text","text":" — subtle blurred shadow"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Chromatic","marks":[{"type":"bold"}]},{"type":"text","text":" — vibrant colored motion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Electric","marks":[{"type":"bold"}]},{"type":"text","text":" — energetic blue trail"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Neon","marks":[{"type":"bold"}]},{"type":"text","text":" — bold glowing pink motion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ink","marks":[{"type":"bold"}]},{"type":"text","text":" — dense editorial-style shadow"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"There is also a "},{"type":"text","text":"Custom","marks":[{"type":"bold"}]},{"type":"text","text":" preset for complete control over the effect."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Support","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Need help using Velocity Shadow in your Framer project?"}]},{"type":"paragraph","content":[{"type":"text","text":"Email: "},{"type":"text","text":"kairmsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:kairmsaif010@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"@karimsaif0 on X","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/karimsaif0?utm_source=chatgpt.com","target":"_blank"}}]}]}]},"introduction":"Directional shadow trail.","slug":"velocity-shadow-text","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a07116-1b91-75a9-b8e0-6ccbf998e73d.png","metadata":{"tint":{"h":60,"s":31,"l":20},"width":1188,"height":781}}],"post":null,"createdAt":"2026-09-05T10:22:18.497Z","updatedAt":"2026-09-16T12:44:54.215Z","publishedAt":"2026-09-05T10:22:18.489Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://velocityshadowtext.framer.website/","price":"6","paymentUrl":"https://karimsaif.lemonsqueezy.com/checkout/buy/788e2f02-c1ab-46cf-9813-3dc7e5f6bd7d","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"ggRVBHLNpSXsI9nb5Ss3","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-05T10:22:19.137Z","updatedAt":"2026-09-05T10:22:19.137Z"},{"id":"01a06ce9-70a2-762a-b439-97dc919b036e","title":null,"body":"$72","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I wanted to make a typography component that feels more like motion graphics than a traditional marquee."}]},{"type":"paragraph","content":[{"type":"text","text":"So I built "},{"type":"text","text":"Chromatic Marquee for Framer","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Instead of simply moving text from on "},{"type":"text","text":"chromaticmarqueeshader.framer.website ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://chromaticmarqueeshader.framer.website","target":"_blank"}}]},{"type":"text","text":"effect."}]},{"type":"paragraph","content":[{"type":"text","text":"You can control:"}]},{"type":"paragraph","content":[{"type":"text","text":"→ Red, Green & Blue colors "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Chromatic offset "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Depth "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Blur "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Intensity "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Animation style "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Animation speed "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Animation amount "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Marquee speed "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Direction "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Typography "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Spacing "}]},{"type":"paragraph","content":[{"type":"text","text":"→ Background"}]},{"type":"paragraph","content":[{"type":"text","text":"It also comes with 5 ready-to-use presets:"}]},{"type":"paragraph","content":[{"type":"text","text":"Classic RGB · Cyber · Neon · Subtle · Glitch","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"The goal was simple: make something that designers "},{"type":"text","text":" Chromatic Marquee, ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://chromaticmarqueeshader.framer.website","target":"_blank"}}]},{"type":"text","text":"while still having enough controls to make it their own."}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"0sR6yEHCcxI4AZldmxYm","resolved":true,"title":"Chromatic Marquee","body":"$73","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Chromatic Marquee","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Bring bold RGB energy and cinematic motion to your typography with "},{"type":"text","text":"Chromatic Marquee","marks":[{"type":"bold"}]},{"type":"text","text":", an animated text marquee built for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Chromatic Marquee transforms ordinary scrolling text into a dynamic chromatic effect using independently controlled red, green, and blue layers. "}]},{"type":"paragraph","content":[{"type":"text","text":"✦ Preview","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Live Preview — Chromatic Marquee","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://chromaticmarqueeshader.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• "},{"type":"text","text":"Infinite Marquee","marks":[{"type":"bold"}]},{"type":"text","text":" — Create a continuously scrolling text loop with smooth, seamless movement."}]},{"type":"paragraph","content":[{"type":"text","text":"• "},{"type":"text","text":"Left & Right Direction","marks":[{"type":"bold"}]},{"type":"text","text":" — Easily control whether your marquee travels from left to right or right to left."}]},{"type":"paragraph","content":[{"type":"text","text":"• "},{"type":"text","text":"5 Visual Presets","marks":[{"type":"bold"}]},{"type":"text","text":" — Quickly switch between Classic RGB, Cyber, Neon, Subtle, and Glitch styles."}]},{"type":"paragraph","content":[{"type":"text","text":"• "},{"type":"text","text":"Custom Mode","marks":[{"type":"bold"}]},{"type":"text","text":" — Take complete control over the chromatic effect and create your own visual combination."}]},{"type":"paragraph","content":[{"type":"text","text":"• "},{"type":"text","text":"Independent RGB Colors","marks":[{"type":"bold"}]},{"type":"text","text":" — Customize the Red, Green, and Blue layers individually."}]},{"type":"paragraph","content":[{"type":"text","text":"• "},{"type":"text","text":"Chromatic Offset","marks":[{"type":"bold"}]},{"type":"text","text":" — Control the distance between the RGB channels to create subtle or extreme color separation."}]},{"type":"paragraph","content":[{"type":"text","text":"• "},{"type":"text","text":"Depth Control","marks":[{"type":"bold"}]},{"type":"text","text":" — Multiply the RGB separation for anything from a restrained effect to dramatic chromatic distortion."}]},{"type":"paragraph","content":[{"type":"text","text":"• "},{"type":"text","text":"Blur","marks":[{"type":"bold"}]},{"type":"text","text":" — Add softness and glow to the colored layers."}]},{"type":"paragraph","content":[{"type":"text","text":"• "},{"type":"text","text":"Intensity","marks":[{"type":"bold"}]},{"type":"text","text":" — Adjust the visual strength of the RGB effect."}]},{"type":"paragraph","content":[{"type":"text","text":"• "},{"type":"text","text":"Animated RGB Layers","marks":[{"type":"bold"}]},{"type":"text","text":" — Turn chromatic animation on or off independently from the marquee movement."}]},{"type":"paragraph","content":[{"type":"text","text":"• "},{"type":"text","text":"Multiple Animation Modes","marks":[{"type":"bold"}]},{"type":"text","text":" — Choose between None, Smooth, Pulse, Drift, and Glitch animations."}]},{"type":"paragraph","content":[{"type":"text","text":"• "},{"type":"text","text":"Animation Speed & Amount","marks":[{"type":"bold"}]},{"type":"text","text":" — Fine-tune exactly how quickly and how far the RGB channels move."}]},{"type":"paragraph","content":[{"type":"text","text":"• "},{"type":"text","text":"Typography Controls","marks":[{"type":"bold"}]},{"type":"text","text":" — Choose your Framer font, font weight, font size, and letter spacing."}]},{"type":"paragraph","content":[{"type":"text","text":"• "},{"type":"text","text":"Marquee Speed","marks":[{"type":"bold"}]},{"type":"text","text":" — Control the horizontal scrolling speed from subtle movement to fast motion."}]},{"type":"paragraph","content":[{"type":"text","text":"• "},{"type":"text","text":"Gap Control","marks":[{"type":"bold"}]},{"type":"text","text":" — Adjust the spacing between repeated text groups."}]},{"type":"paragraph","content":[{"type":"text","text":"• "},{"type":"text","text":"Opacity Control","marks":[{"type":"bold"}]},{"type":"text","text":" — Fine-tune the visibility of the chromatic layers."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Support","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Need help using the component, have a question, or found something that could be improved?"}]},{"type":"paragraph","content":[{"type":"text","text":"Email:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"@karimsaif0 on X","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://x.com/karimsaif0","target":"_blank"}}]}]}]},"introduction":"Dynamic chromatic effect","slug":"chromatic-marquee","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a06ce7-d107-77ee-8c01-995b9a232de1.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1186,"height":781}}],"post":null,"createdAt":"2026-09-04T14:53:52.560Z","updatedAt":"2026-09-16T12:45:27.722Z","publishedAt":"2026-09-04T14:53:52.556Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://chromaticmarqueeshader.framer.website/","price":"6","paymentUrl":"https://karimsaif.lemonsqueezy.com/checkout/buy/80150d31-1ec8-4bd6-9404-3a80f8bf3797","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"ZTZEKwW2eJhagFkUkeDf","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-09-04T14:53:53.186Z","updatedAt":"2026-09-04T14:53:53.186Z"},{"id":"01a0668d-edc4-768a-8a5a-dbf995f543c2","title":null,"body":"

Most marquees just move text from left to right.

I wanted to make typography feel alive.

So I built Wave Marquee Shader for Framer , an animated marquee that combines continuous scrolling with organic wave deformation to create a fluid, dynamic typography effect.

You can customize the text, typography, speed, wave size, frequency, viscosity, distortion, glow, direction, and more.

Built for creative websites, portfolios, hero sections, and experimental digital experiences.

Try it

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Most marquees just move text from left to right."}]},{"type":"paragraph","content":[{"type":"text","text":"I wanted to make typography feel alive."}]},{"type":"paragraph","content":[{"type":"text","text":"So I built "},{"type":"text","text":"Wave Marquee Shader for Framer","marks":[{"type":"bold"}]},{"type":"text","text":" , an animated marquee that combines continuous scrolling with organic wave deformation to create a fluid, dynamic typography effect."}]},{"type":"paragraph","content":[{"type":"text","text":"You can customize the text, typography, speed, wave size, frequency, viscosity, distortion, glow, direction, and more."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for creative websites, portfolios, hero sections, and experimental digital experiences."}]},{"type":"paragraph","content":[{"type":"text","text":"Try it","marks":[{"type":"bold"}]}]}]},"author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"0IMORkGtCAHwHDwvOjbZ","resolved":true,"title":"Wave Marquee Shader","body":"$74","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Bring movement and depth to your typography with "},{"type":"text","text":"Wave Marquee Shader","marks":[{"type":"bold"}]},{"type":"text","text":" — an animated text marquee that transforms ordinary scrolling text into a fluid, organic wave."}]},{"type":"paragraph","content":[{"type":"text","text":"Instead of a simple horizontal marquee, Wave Marquee Shader continuously deforms your typography with layered waves, creating a dynamic liquid-like motion that feels alive while remaining fully customizable."}]},{"type":"paragraph","content":[{"type":"text","text":"Preview:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"Wave Marquee Shader Preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://wavemarqueeshader.framer.website/?utm_source=chatgpt.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for hero sections, landing pages, creative portfolios, experimental websites, agencies, digital products, and anywhere you want typography to become a visual experience."}]},{"type":"customHeading","content":[{"type":"text","text":"Great For"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agency websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio and personal websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Award-style websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Digital studios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product launches"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fashion and editorial websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Music and entertainment websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative Framer projects"}]}]}]},{"type":"customHeading","attrs":{"level":1}},{"type":"customHeading","content":[{"type":"text","text":"Support"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Need help using Wave Marquee Shader or have a question about the component?"}]},{"type":"paragraph","content":[{"type":"text","text":"Email:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"karimsaif010@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:karimsaif010@gmail.com","target":"_blank"}}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"X:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"@karimsaif0 on X","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/karimsaif0?utm_source=chatgpt.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"I’m happy to help with setup, customization, or troubleshooting."}]}]},"introduction":"Animated text marquee","slug":"wave-marquee-shader","author":{"framerUserId":"cdbd7ebc-86d4-4b64-baea-421f236c7c35","name":"Karim Saif","slug":"karim-saif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/38316/JKMR4LgEt-1ogBJEJjcXu0BLVSwyn9DCkQ64JbBx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0668d-3f8f-724c-8859-3511c117de64.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1189,"height":765}}],"post":null,"createdAt":"2026-09-03T09:16:12.003Z","updatedAt":"2026-09-16T12:46:15.953Z","publishedAt":"2026-09-03T09:16:11.999Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://wavemarqueeshader.framer.website/","price":"6","paymentUrl":"https://karimsaif.lemonsqueezy.com/checkout/buy/b9f83fbc-8eb3-42b0-adeb-665e08414beb","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"sb7noyIC21kukS3NNuGR","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-03T09:16:12.612Z","updatedAt":"2026-09-03T09:16:12.612Z"}],"pagination":{"next":"MDFhMDY2OGQtZWRjNC03NjhhLThhNWEtZGJmOTk1ZjU0M2My","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L75"}]