50:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 51:T9e8,

Line Drawer

Line Drawer is a sleek, modern component that animates SVG paths — either on scroll or through a smooth, controlled animation.It’s perfect for adding dynamic motion to your layouts, storytelling sections, or illustrations, making your site feel more alive and polished.It integrates seamlessly into any Framer project and works perfectly across all browsers and devices, with lightweight performance and full customization.

Key Features

Scroll or Timed Animation – Choose between scroll-based drawing or time-based animation for full creative control.
Custom SVG Support – Import and animate any SVG path effortlessly.
Customizable Stroke – Define color, gradient, thickness, opacity, and easing curves.
Optimized Performance – No dependencies, minimal load, and buttery-smooth motion.
Support Section trigger settings for more complexe scroll animations - you can use only start section trigger, or both start and end section trigger.
replay options
Delay animation

Usage Advice

For the best visual impact, use Line Drawer to guide attention — for example, along a storytelling section, to connect key UI elements, or to animate illustrations.Keep the animation subtle and fluid to preserve your site’s elegance and performance.Try combining it with blur, glow, or parallax effects for an elevated, futuristic feel.

Use Cases

Drawing SVG lines dynamically on scroll for immersive landing pages.
Animating shapes or paths to illustrate a user journey.
Creating eye-catching motion graphics in portfolio or showcase sites.
Adding subtle kinetic energy to minimalist UI designs.

Support

With this component, you get unlimited free support — and yes, I personally answer every emailsIf you ever need a custom animation component or advanced setup:📧 robin.garaboeuf@gmail.com

Selection Color Changer

Selection Color Changer is a fully customizable component that lets you define how text selections appear across your website. Instead of the default browser highlight, you can create a selection color that perfectly matches your brand, with full control over styling and behavior.It integrates seamlessly into your Framer projects and works out of the box with both light and dark themes for a consistent experience across all devices and browsers.

Key Features

Scoped Selections – Apply different selection colors to specific sections or elements.
Light / Dark Theme Support – Automatically adapts to your site’s current theme.
Form Safety – Excludes inputs, textareas, and other form fields to avoid unwanted highlighting (optional).
Browser Compatibility – Works smoothly across all major modern browsers.
Custom Styling – Choose any color, add transparency, and define fallback options.
Lightweight – No dependencies, zero performance impact.

Usage Advice

You should define a default global scope for the simple theme mode as well as your actual dark/light mode colors, as a fallback settings for browsers that don’t fully support theme colors, such as Safari.

Use Cases

Creating branded text selection effects for your website or app.
Enhancing reading experiences with subtle, theme-consistent highlights.
Making your UI feel more cohesive and refined with minimal effort.
Adding polish to premium portfolio or marketing sites to look more professionnal.

Support

With this component, you get unlimited free support — and yes, I actually answer emails if you ever get stuck!

Feel free to reach out if you need a custom component.

📧 robin.garaboeuf@gmail.com

Description

Progress Slideshow is an interactive, automated carousel that displays a sequence of cards (title, description, and image) alongside a corresponding image section. Cards transition smoothly with fade effects, each featuring an individual progress bar that indicates remaining time before switching. The component is highly customizable, supporting both horizontal and vertical layouts with flexible visual and behavioral options.

Functional Overview

Effortless autoplay with customizable speed and seamless looping
Autoplay toggle with optional pause-on-hover for user control
Flexible content: add as many cards as you want with images, titles, and text
Highlighted active card with smooth focus, while inactive cards fade elegantly
Smooth fade transitions for a premium, polished experience
Flexible image display with cover/contain modes, borders, and rounded corners
Dynamic progress bar animation that stays perfectly in sync
Customize progress bar height, color palette, and spacing for your brand
Multiple layouts: horizontal or vertical, with mirrored card/image positioning
Full control over order: choose whether cards or images come first
Adjustable card ratios and spacing to fit your design vision
Total styling freedom: backgrounds, padding, borders, opacity, and radii
Complete typography control for titles and text (alignment, colors, sizes, weights, spacing, line height)
Optimized for performance with smooth rendering and transitions
Automatic cleanup of animations for stability and reliability
Lightweight static editor mode to keep your workspace fast and responsive

👉 This component is ideal for product features, testimonials, case studies, or any sequential content requiring strong visuals and smooth storytelling.

Support

With this component you get unlimited free support, plus I actually answer emails if you get stuck!  Feel free to reach out if you need more customization or other type of component.

Due to this being a digital product, refunds are not possible.

robin.garaboeuf@gmail.com

Tags

carousel, animation, slideshow image and text, ui effects, minimal, progress bar, customizable.

4f:["$","$L50",null,{"value":{"fallback":{"$inf$activity-creator-02799a2f-9034-40f1-ad0d-1db0d88f9880-all:/unified/creator/02799a2f-9034-40f1-ad0d-1db0d88f9880/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:02799a2f-9034-40f1-ad0d-1db0d88f9880:/unified/posts/?creator=02799a2f-9034-40f1-ad0d-1db0d88f9880&with=reposts":[{"data":[{"id":"0199f7d6-2c4c-75f8-94dc-2e2525e643b8","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"02799a2f-9034-40f1-ad0d-1db0d88f9880","name":"Robin G","slug":"fliks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/667936/avatar-134isGVWzyq2vTqIuVmzoFDz1JyfSl.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"SpjVC5bE1mmk965eGHN6","resolved":true,"title":"Line draw SVG ","body":"$51","bodyJson":null,"introduction":"","slug":"line-draw-svg","author":{"framerUserId":"02799a2f-9034-40f1-ad0d-1db0d88f9880","name":"Robin G","slug":"fliks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/667936/avatar-134isGVWzyq2vTqIuVmzoFDz1JyfSl.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/SpjVC5bE1mmk965eGHN6/line-draw-svg-5wVlE72UqOEBSB3Rqfo0bcgd1VaSga","metadata":{"tint":{"h":210,"s":67,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-09-30T14:18:23.009Z","updatedAt":"2025-11-26T01:26:35.003Z","publishedAt":"2025-10-18T15:00:32.460Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://svg-line-drawn-component.framer.website/","price":"2","paymentUrl":null,"workshop":true,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"a4Jqn0kPxF91YUny58Z8","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":"2025-10-18T15:00:32.460Z","updatedAt":"2025-10-18T15:00:32.460Z"},{"id":"0199dde1-75aa-739d-869a-dd67eefc7851","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"02799a2f-9034-40f1-ad0d-1db0d88f9880","name":"Robin G","slug":"fliks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/667936/avatar-134isGVWzyq2vTqIuVmzoFDz1JyfSl.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"BRhICJ7Bz1ygq43mYHFG","resolved":true,"title":"Selection Color","body":"$52","bodyJson":null,"introduction":"","slug":"selection-color","author":{"framerUserId":"02799a2f-9034-40f1-ad0d-1db0d88f9880","name":"Robin G","slug":"fliks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/667936/avatar-134isGVWzyq2vTqIuVmzoFDz1JyfSl.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/BRhICJ7Bz1ygq43mYHFG/selection-color-oGfVJ39C2F6kp5kTeqdra8UJtOASd4","metadata":{"tint":{"h":0,"s":75,"l":13},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-06T12:52:30.639Z","updatedAt":"2025-11-22T03:55:32.488Z","publishedAt":"2025-10-13T14:02:44.522Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/TextHighlight-Y2tL.js@YK5XHpCpi5lB24r6ZhxK","previewUrl":"https://text-highlight.framer.website/","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"YK5XHpCpi5lB24r6ZhxK","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":"2025-10-13T14:02:44.522Z","updatedAt":"2025-10-13T14:02:44.522Z"},{"id":"0199cd57-cdee-7b9e-9d3e-4083dbac69c5","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"02799a2f-9034-40f1-ad0d-1db0d88f9880","name":"Robin G","slug":"fliks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/667936/avatar-134isGVWzyq2vTqIuVmzoFDz1JyfSl.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"bwOJPFL4n6lQ2eHrnqbR","resolved":true,"title":"Progress Slideshow","body":"$53","bodyJson":null,"introduction":"","slug":"progress-slideshow","author":{"framerUserId":"02799a2f-9034-40f1-ad0d-1db0d88f9880","name":"Robin G","slug":"fliks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/667936/avatar-134isGVWzyq2vTqIuVmzoFDz1JyfSl.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/bwOJPFL4n6lQ2eHrnqbR/progress-slideshow-TNFO3HRl0LduBSUJlPFk55A7n2hnhy","metadata":{"tint":{"h":192,"s":83,"l":19},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-03T17:22:29.222Z","updatedAt":"2025-10-24T09:23:19.372Z","publishedAt":"2025-10-10T08:58:27.694Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://slideshow-with-progress-indicator.framer.website/","price":"4","paymentUrl":"https://fliks.lemonsqueezy.com/buy/a20b2b7a-de7f-490e-b101-3401a1dea5ba","workshop":true,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"HroVkUp8YKQwMrNmO9zt","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":"2025-10-10T08:58:27.694Z","updatedAt":"2025-10-10T08:58:27.694Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L54"}]