THE DESIGN FUTURIST

THE DESIGN FUTURIST

Build studio-level websites with speed and ease. Framer web templates & premium components

(CMS) 3D Sphere Gallery — Framer Component

$15.00

A collection of Three.js, WebGL, and GSAP effects for Framer. Ready to use with a single click! ✶ Explore the full collection → https://thedesignfuturist.zip ✶ Unlimited access → https://thedesignfuturist.zip/pricing ________________🚶🏻‍♂️_________ Live Preview https://brown-memory-209174.framer.app/ About this Component Introducing a 3D Sphere Gallery component seamlessly integrated with Framer’s CMS Collections, featuring intuitive drag and scroll interactions alongside GSAP-powered intro and auto-rotation animations that can be easily enabled or disabled, delivering smooth motion and immersive 3D depth for a modern web experience. Customizable Properties ImageAspect Ratio1:1, 2:3, 3:2, 3:4, 4:3, 4:5, 9:16, 16:9LinkOpen in New TabYes / NoSphere Size (px)Item RepeatItem GapDrag SensitivityIntro AnimationEnabled / DisabledAuto SpinEnabled / DisabledSpin Speed (s) LicenseThis product can be used for both personal and commercial purposes. However, redistribution and resale of the product are strictly prohibited. Click here for more information Refund Policy All sales of digital products are final and non-refundable.If you have any questions about a product, please contact us at [email protected] before completing your purchase. We are happy to provide assistance.

View Product

(CMS) Cursor Following Image

$8.00

View Product

(CMS) Infinite Draggable Gallery — Framer Component

$12.00

A collection of Three.js, WebGL, and GSAP effects for Framer. Ready to use with a single click! ✶ Explore the full collection → https://thedesignfuturist.zip ✶ Unlimited access → https://thedesignfuturist.zip/pricing ________________🚶🏻‍♂️_________ Live Preview https://positive-concept-484649.framer.app/ About this Component Introducing an Infinite Draggable Gallery seamlessly integrated with Framer’s CMS Collections. Powered by the GSAP library, it delivers smooth, responsive interactions with parallax effects, hover animations, and natural inertia. Customizable Properties ImageTitleTitle / Title Font / Title ColorDescriptionDescription / Description Font / Description ColorLinkEnabled/DisabledURLOpen in New TabLayoutItem Width (px)Item Height (px)Grid Gap (px)Text Gap (px)InertiaEnabled / DisabledBlur EffectEnabled / DisabledBlur Strength (px)ParallaxEnabled / Disabled LicenseThis product can be used for both personal and commercial purposes. However, redistribution and resale of the product are strictly prohibited. Click here for more information Refund Policy All sales of digital products are final and non-refundable.If you have any questions about a product, please contact us at [email protected] before completing your purchase. We are happy to provide assistance.

View Product

(CMS) Parallax Gallery — Framer Component

$15.00

A collection of Three.js, WebGL, and GSAP effects for Framer. Ready to use with a single click! ✶ Explore the full collection → https://thedesignfuturist.zip ✶ Unlimited access → https://thedesignfuturist.zip/pricing ________________🚶🏻‍♂️_________ Live Preview https://sharp-desktop-436400.framer.app About this Component Experience a powerful, all-in-one parallax gallery that connects seamlessly to your Framer CMS for instant deployment. This component gives you total creative control, allowing you to choose from curated presets or upload your own SVG logos to define the unique shape of the image particles. Whether you need a high-end Lightbox or direct external links, this versatile tool supports both to fit any project. Everything is powered by GSAP, delivering buttery-smooth, industry-standard animations that will elevate your site’s visual experience to the next level. Customizable Properties ShapePreset - Circle / Heart / FlowerUpload - Upload your own logo (svg)ImageSet Variable to integrate with CMS CollectionTotal ImageRepeat Images as many as you wantImage ScaleWhen ClickedLinkLightboxPaddingBackground - Color / Backdrop-BlurClose Icon - Upload / Size / Color / Hover ColorArrow Icon - Upload / Size / Color / Hover Color / Background Color / Margin3D DepthCamera Distance LicenseThis product can be used for both personal and commercial purposes. However, redistribution and resale of the product are strictly prohibited. Click here for more information Refund Policy All sales of digital products are final and non-refundable.If you have any questions about a product, please contact us at [email protected] before completing your purchase. We are happy to provide assistance.

View Product

3D Card Scroll — Framer Component

$15.00

A collection of Three.js, WebGL, and GSAP effects for Framer. Ready to use with a single click! ✶ Explore the full collection → https://thedesignfuturist.zip ✶ Unlimited access → https://thedesignfuturist.zip/pricing ________________🚶🏻‍♂️_________ Live Preview https://magical-spot-403364.framer.app About this Component Infinite scroll 3D cards for Framer built with Three.js, featuring GSAP-powered micro-interactions for a highly engaging experience. Adjust camera motion and spatial settings to tailor the scene exactly to your needs. Customizable Properties ItemsAdd Image Items, Include Alt Text, And Add Links. (Links Are Added In The Modal.)Total CountSet The Total Number Of Cards.CardWidthHeightRadiusOpacityPerspectiveThicknessObject Fit: Cover / ContainScroll SpeedDepth RangeAdjust The 3D Depth.CameraAdjust The Camera Angle, Distance, And Perspective To Control The Spatial Feel Of The 3D Scene.HeightDistancePerspectiveModalConfigure The Modal That Appears With An Animation When A Card Is Clicked.Card ScaleClose Button SizeClose Button Background ColorClose Button Background Color (On Hover)Close Button Icon ColorClose Button Icon ThicknessClose Button Background Blur LicenseThis product can be used for both personal and commercial purposes. However, redistribution and resale of the product are strictly prohibited. Click here for more information Refund Policy All sales of digital products are final and non-refundable.If you have any questions about a product, please contact us at [email protected] before completing your purchase. We are happy to provide assistance.

View Product

3D Card Scroll 02 — Framer Component

$15.00

A collection of Three.js, WebGL, and GSAP effects for Framer. Ready to use with a single click! ✶ Explore the full collection → https://thedesignfuturist.zip ✶ Unlimited access → https://thedesignfuturist.zip/pricing ________________🚶🏻‍♂️_________ Live Preview https://positive-ideas-950472.framer.app About this Component 3D cards gallery for Framer built with Three.js. Supports infinite scroll for large collections and optional links on images to detail pages or external destinations. Customizable Properties ItemsAdd multiple images (including alt text, link and new tab props)CardWidthHeightRadiusGapScroll SpeedEnable HoverWhen enabled, a grayscale hover effect is applied. LicenseThis product can be used for both personal and commercial purposes. However, redistribution and resale of the product are strictly prohibited. Click here for more information Refund Policy All sales of digital products are final and non-refundable.If you have any questions about a product, please contact us at [email protected] before completing your purchase. We are happy to provide assistance.

View Product

3D Cylinder Scroll — Framer Component

$15.00

A collection of Three.js, WebGL, and GSAP effects for Framer. Ready to use with a single click! ✶ Explore the full collection → https://thedesignfuturist.zip ✶ Unlimited access → https://thedesignfuturist.zip/pricing ________________🚶🏻‍♂️_________ Live Preview https://readable-surface-167824.framer.app About this Component A 3D cylinder-shaped infinite card scroll component powered by Three.js.It includes smooth scrolling and supports links on both images and videos.For detailed specifications, please refer to the Customizable Properties section. Customizable Properties ModeTouch / MouseOptimized performance for both desktop and touch-based devices.ThemeDark / LightChoose between Dark and Light themes based on lighting conditions.Items (Array)Add multiple items and assign linksMedia Type: Image / VideoPoster Image for VideoLinkOpen in New TabAspect Ratio1:1, 2:3, 3:2, 3:4, 4:3, 4:5, 16:9, 9:163D ScenePerspectiveControls camera depth and perspective. Adjust scale via zoom in/out.ColumnsNumber of items displayed per row.GapSpacing between items.AnimationAuto Rotation: Enabled / DisabledAuto Rotation SpeedPreview in Editor: Enabled / DisabledInteractionScroll Shader (Noise): Enabled / DisabledHover Shader (Noise): Enabled / DisabledHover Shader (Noise) AmountSmooth ScrollingUse Lenis: Enabled / DisabledAmount LicenseThis product can be used for both personal and commercial purposes. However, redistribution and resale of the product are strictly prohibited. Click here for more information Refund Policy All sales of digital products are final and non-refundable.If you have any questions about a product, please contact us at [email protected] before completing your purchase. We are happy to provide assistance

View Product

3D Image Wheel — Framer Component

$15.00

A collection of Three.js, WebGL, and GSAP effects for Framer. Ready to use with a single click! ✶ Explore the full collection → https://thedesignfuturist.zip ✶ Unlimited access → https://thedesignfuturist.zip/pricing ________________🚶🏻‍♂️_________ Live Preview https://same-perspective-110020.framer.app/ About this Component Showcase your portfolio beautifully with a 3D image wheel created with Three.js. Choose between two types — scroll or animation. Customizable Properties EffectScroll/AnimateitemsMedia Type(Image/Video)TitleLink**Videos will automatically play when they are set to the scroll-type and displayed in the preview area. They can be loaded via direct upload or a hosting URL.Item multiplierRepeat your item setsPaddingCard Width/Height/RadiusBackground ColorPreview (When Scroll)On desktop, when the card is hovered over with the mouse, you can display a preview at the desired position. On mobile, the preview appears sequentially according to the item index as it scrolls.VisibilityWidth/HeightPositionTitle VisibilityFont/Weight/Size/LetterSpacing/LineHeightText Color/Text AlignGapPadding LicenseThis product can be used for both personal and commercial purposes. However, redistribution and resale of the product are strictly prohibited. Click here for more information Refund Policy All sales of digital products are final and non-refundable.If you have any questions about a product, please contact us at [email protected] before completing your purchase. We are happy to provide assistance.

View Product

Cinematic 3D Carousel — Framer Component

$8.00

A collection of Three.js, WebGL, and GSAP effects for Framer. Ready to use with a single click! ✶ Explore the full collection → https://thedesignfuturist.zip ✶ Unlimited access → https://thedesignfuturist.zip/pricing ________________🚶🏻‍♂️_________ Live Preview https://make-tasks-824710.framer.app About this Component A cinematic 3D slideshow for Framer built with Three.js. Ideal for anyone looking to bring true immersion to the hero section. Customizable Properties *Using Three.js in Framer works best when the content is kept light. Videos, in particular, can slow the canvas down, so if you need them, limit it to one or two optimized clips. Using images is usually the safer option. Overall, try to stay within 5–8 items for the best performance. This component isn’t meant for loading lots of videos or heavy assets. ItemsMedia Type (Image/Video)Aspect Ratio4:316:9Rotation SpeedAuto Rotateon/offEnable Dragon/offStop on hoveron/offField of ViewAdjust Camera Distance LicenseThis product can be used for both personal and commercial purposes. However, redistribution and resale of the product are strictly prohibited. Click here for more information Refund Policy All sales of digital products are final and non-refundable.If you have any questions about a product, please contact us at [email protected] before completing your purchase. We are happy to provide assistance.

View Product

CMS Tag Generator — Framer Component

$5.00

A collection of Three.js, WebGL, and GSAP effects for Framer. Ready to use with a single click! ✶ Explore the full collection → https://thedesignfuturist.zip ✶ Unlimited access → https://thedesignfuturist.zip/pricing ________________🚶🏻‍♂️_________ Live Preview https://loud-devices-322722.framer.app/ About This Component CMS Tag Generator is a Framer component that generates tags by integrating with CMS text fields. Tags are created from comma-separated input, and customizable properties make it easy to adapt the tag design to fit your website’s style. Customizable Properties TagAlignment (Left/Center/Right)Gap (X/Y)Padding (Top/Right/Bottom/Left)MinwidthText ColorBackground ColorRadiusOuter Stroke Width & ColorInner Stroke Width & ColorShadow (Color/X/Y/Blur/Spread) LicenseThis product can be used for both personal and commercial purposes. However, redistribution and resale of the product are strictly prohibited. Click here for more information Refund Policy All sales of digital products are final and non-refundable.If you have any questions about a product, please contact us at [email protected] before completing your purchase. We are happy to provide assistance

View Product

Draggable Arc Carousel — Framer Component

$8.00

A collection of Three.js, WebGL, and GSAP effects for Framer. Ready to use with a single click! ✶ Explore the full collection → https://thedesignfuturist.zip ✶ Unlimited access → https://thedesignfuturist.zip/pricing ________________🚶🏻‍♂️_________ Live Preview https://successful-diversity-678439.framer.app/ About this Component Introducing the Infinite Draggable Carousel for Framer.This GSAP-powered component uses a node-based system, allowing you to simply link your own Framer-designed frames. This means you have 100% design freedom to create any card layout without restrictions. It’s built for high performance and features two seamless animation modes: Snap and Auto-Rotate. Customizable Properties Connect FramesPreset - Circle / Heart / FlowerUpload - Upload your own logo (svg)LayoutArc SizeStart PosGapAnimationAnimation - Enabled / DisabledAnimation Type - Snap / Auto RotateAnimation SpeedAnimation Direction - Clockwise / Counter-Clockwise LicenseThis product can be used for both personal and commercial purposes. However, redistribution and resale of the product are strictly prohibited. Click here for more information Refund Policy All sales of digital products are final and non-refundable.If you have any questions about a product, please contact us at [email protected] before completing your purchase. We are happy to provide assistance.

View Product

Dynamic ASCII Reveal Effect — Framer Component

$8.00 - $12.00

A collection of Three.js, WebGL, and GSAP effects for Framer. Ready to use with a single click! ✶ Explore the full collection → https://thedesignfuturist.zip ✶ Unlimited access → https://thedesignfuturist.zip/pricing ________________🚶🏻‍♂️_________ Live Preview https://nuanced-startup-647964.framer.app About this Component A fully customizable ASCII component compatible with Hover & Scroll Interaction. Built with WebGL, this ASCII Generator allows complete color customization beyond black and white. Use four Dynamic Cover presets to create animated ASCII effects. *Dynamic Cover is available only for images. Product Variants Select the product variant that fits your needs before purchasing.• Image upload (default)• Image + video upload (full version) Customizable Properties Object fit : Fit/FillPreview in EditorInteraction : Hover/Scroll/NoneReplay (on scroll)Trigger Point (on scroll)Reveal Effect : Fade, Center Line, Top Down, Bottom Up, Edges In, ZigzagReveal DurationPixel SizeASCII Effect : Yes/NoASCII CharactersTonal StepsColor Mode : Solid/SourceColorBackground ColorContrastBrightnessDynamic CoverEnabled : Yes/NoPattern : Wave/Rain/Random/LuminousSpeedUse Effect Color : Yes/NoEffect Color LicenseThis product can be used for both personal and commercial purposes. However, redistribution and resale of the product are strictly prohibited. Click here for more information Refund Policy All sales of digital products are final and non-refundable.If you have any questions about a product, please contact us at [email protected] before completing your purchase. We are happy to provide assistance.

View Product

Flap Board Animation — Framer Component

$5.00

A collection of Three.js, WebGL, and GSAP effects for Framer. Ready to use with a single click! ✶ Explore the full collection → https://thedesignfuturist.zip ✶ Unlimited access → https://thedesignfuturist.zip/pricing ________________🚶🏻‍♂️_________ Live Preview https://framer-component-flap-board-animation.framer.website/ About This Component This text animation is inspired by airport departure boards. Use eye-catching effects to highlight keywords on your Framer website and create a retro mood. Offers a wide range of rich, customizable properties: TextAdd as many keywords as you like.FontCustomize font style, weight, size, and more.ColorFreely set colors for all elements — including board, blocks, text, and more.Character SequenceDefine the range of characters to apply animation effects to (e.g., A–Z for English).Padding & GapAdjust the padding and spacing between Flapboard blocks.Animation ControlsFine-tune animation with settings like step delay, duration, and pre-switch delay.Flap LineToggle the flapboard's dividing line on or off. LicenseThis product can be used for both personal and commercial purposes. However, redistribution and resale of the product are strictly prohibited. Click here for more information Refund Policy All sales of digital products are final and non-refundable.If you have any questions about a product, please contact us at [email protected] before completing your purchase. We are happy to provide assistance

View Product

Gradient Shader Visualizer — Framer Component

$8.00

A collection of Three.js, WebGL, and GSAP effects for Framer. Ready to use with a single click! ✶ Explore the full collection → https://thedesignfuturist.zip ✶ Unlimited access → https://thedesignfuturist.zip/pricing ________________🚶🏻‍♂️_________ Live Preview https://fuzzy-premise-456487.framer.app About this Component Create stunning visuals with a animated gradient shader visualizer. Grain textures and scan lines add a retro, dreamlike vibe, while interactive mouse effects enhance the experience. Fully customizable — see the customizable properties for all options. Customizable Properties Media TypeImage / Video3-Color SelectionGrain Filter (%)Scanline Filter (%)Animation SpeedFadeEnabled / DisabledEdge Curve (%)Mouse InteractionEnable / DisabledPixel Size (px)PowerDecayBrush Size LicenseThis product can be used for both personal and commercial purposes. However, redistribution and resale of the product are strictly prohibited. Click here for more information Refund Policy All sales of digital products are final and non-refundable.If you have any questions about a product, please contact us at [email protected] before completing your purchase. We are happy to provide assistance.

View Product

GSAP 3D Radial Gallery — Framer Component

$8.00

A collection of Three.js, WebGL, and GSAP effects for Framer. Ready to use with a single click! ✶ Explore the full collection → https://thedesignfuturist.zip ✶ Unlimited access → https://thedesignfuturist.zip/pricing ________________🚶🏻‍♂️_________ Live Preview https://fortuitous-branding-645346.framer.app About this Component Introducing the GSAP 3D Radial Gallery for Framer. A lightweight 3D gallery built with pure CSS, enhanced with smooth GSAP intro animations. Move your mouse or drag to interact with the gallery in 3D space. All properties are fully customizable for seamless integration into your project. Customizable Properties Items 3D SceneTilt XTilt ZCenter OffsetCardWidthHeightBorder RadiusIntro AnimationEnabled / DisabledDuration (s)Auto RotationEnabled / DisabledSpeed (s)DraggableEnabled / DisabledMouse InteractionEnabled / Disabled LicenseThis product can be used for both personal and commercial purposes. However, redistribution and resale of the product are strictly prohibited. Click here for more information Refund Policy All sales of digital products are final and non-refundable.If you have any questions about a product, please contact us at [email protected] before completing your purchase. We are happy to provide assistance.

View Product

GSAP Kinetic Text — Framer Component

$5.00

A collection of Three.js, WebGL, and GSAP effects for Framer. Ready to use with a single click! ✶ Explore the full collection → https://thedesignfuturist.zip ✶ Unlimited access → https://thedesignfuturist.zip/pricing ________________🚶🏻‍♂️_________ Live Preview https://dandy-strengthening-195437.framer.app/ About this Component A GSAP text animation component with customizable properties such as duration, amount, and distance, plus configurable clone directions (up, down, or both). Customizable Properties Text InputHTML TagH1~H6, p, spanFontFont ColorBackground ColorDirectionUp / Down / BothAmountDistance(px)Duration(s) LicenseThis product can be used for both personal and commercial purposes. However, redistribution and resale of the product are strictly prohibited. Click here for more information Refund Policy All sales of digital products are final and non-refundable.If you have any questions about a product, please contact us at [email protected] before completing your purchase. We are happy to provide assistance.

View Product

GSAP Random Text — Framer Component

$5.00

A collection of Three.js, WebGL, and GSAP effects for Framer. Ready to use with a single click! ✶ Explore the full collection → https://thedesignfuturist.zip ✶ Unlimited access → https://thedesignfuturist.zip/pricing ________________🚶🏻‍♂️_________ Live Preview https://framer-component-random-text-reveal.framer.website/ About This Component A powerful text reveal animation that helps you convey messages smoothly and beautifully on your website. Made with GSAP. Customizable Properties Scroll TriggerTop/Center/BottomReplayFrom Opacity & To OpacityFont & Font ColorMin Delay & Max DelayEasing Presets LicenseThis product can be used for both personal and commercial purposes. However, redistribution and resale of the product are strictly prohibited. Click here for more information Refund Policy All sales of digital products are final and non-refundable.If you have any questions about a product, please contact us at [email protected] before completing your purchase. We are happy to provide assistance.

View Product

GSAP Scroll Text — Framer Component

$5.00

A collection of Three.js, WebGL, and GSAP effects for Framer. Ready to use with a single click! ✶ Explore the full collection → https://thedesignfuturist.zip ✶ Unlimited access → https://thedesignfuturist.zip/pricing ________________🚶🏻‍♂️_________ Live Preview https://luxurious-writing-837737.framer.app/ About this Component A GSAP text animation for Framer that works with horizontal scroll.Offers multiple customizable properties, including animation controls. Customizable Properties TextFontFont ColorGapAnimation IntensityScroll DistanceScrub Speed LicenseThis product can be used for both personal and commercial purposes. However, redistribution and resale of the product are strictly prohibited. Click here for more information Refund Policy All sales of digital products are final and non-refundable.If you have any questions about a product, please contact us at [email protected] before completing your purchase. We are happy to provide assistance.

View Product

GSAP Wavy Text — Framer Component

$8.00

A collection of Three.js, WebGL, and GSAP effects for Framer. Ready to use with a single click! ✶ Explore the full collection → https://thedesignfuturist.zip ✶ Unlimited access → https://thedesignfuturist.zip/pricing ________________🚶🏻‍♂️_________ Live Preview https://delightful-everyone-997582.framer.app About this Component A powerful GSAP text animation component for Framer that creates a wavy effect on hover or layer in view. It offers a range of customizable properties, including precise animation controls. See the product description for the full list. Customizable Properties TextHTML TagH1~H6, p, spanFontFont ColorLine HeightWords BreakKeep All / Break AllInteractionHover / Layer in ViewSplit By *if (interaction === 'Hover')Word / LineRevert on Exit *if (interaction === 'Hover')Yes / NoReplay *if (interaction === 'Layer in View')Delay *if (interaction === 'Layer in View')Threshold *if (interaction === 'Layer in View')StaggerDurationEasing PresetsBack / Power1 / Power2 / Power3Effect Area LicenseThis product can be used for both personal and commercial purposes. However, redistribution and resale of the product are strictly prohibited. Click here for more information Refund Policy All sales of digital products are final and non-refundable.If you have any questions about a product, please contact us at [email protected] before completing your purchase. We are happy to provide assistance.

View Product

Infinite Galaxy Scroll — Framer Component

$15.00

A collection of Three.js, WebGL, and GSAP effects for Framer. Ready to use with a single click! ✶ Explore the full collection → https://thedesignfuturist.zip ✶ Unlimited access → https://thedesignfuturist.zip/pricing ________________🚶🏻‍♂️_________ Live Preview https://fresh-founders-991110.framer.app About this Component An infinite image gallery that feels like drifting through space.Built with Three.js for true spatial depth, it offers a smooth scrolling experience across desktop, tablet, and mobile. Customizable Properties ItemsAdd as many images as you like.Include alt text for SEO and link each image to any page.Object Width / HeightObject Fit (cover / contain)Particle CountChoose how many images appear in the gallery.Scroll SpeedDepth RangeMouse Interaction (Yes / No)Mouse Sensitivity LicenseThis product can be used for both personal and commercial purposes. However, redistribution and resale of the product are strictly prohibited. Click here for more information Refund Policy All sales of digital products are final and non-refundable.If you have any questions about a product, please contact us at [email protected] before completing your purchase. We are happy to provide assistance.

View Product