62: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"] 63:T866,

About this Component

Immersive 3D Gallery is an interactive WebGL gallery built for portfolios, showcases, creative websites, and experimental experiences.

Choose between three completely different gallery modes — Tube, Sphere, and Rubens — each with its own movement and interaction style. Upload your own images, add project names and links, import a custom 3D model, and fine-tune the entire experience directly inside Framer.

Perfect For

• Creative portfolios • Project showcases • Photography websites • Art and fashion sites • Experimental landing pages • Immersive digital experiences

Key Features

• Three gallery modes: Tube, Sphere & Rubens • Upload your own project images • Custom project names, descriptions & links • Upload your own GLB/GLTF 3D model • Interactive scroll-driven gallery movement • Draggable 3D sphere with smooth momentum • Automatic snapping in Sphere mode • Infinite rotating Tube gallery • Dynamic blurred backgrounds in Rubens mode • Custom cursor and project labels • Adjustable gallery radius, image size & spacing • Control scroll speed, rotation, drag feel & snapping • Custom 3D model scale, position & opacity • Separate mobile model scaling

How It Works

Add your projects from the property panel, choose a gallery mode, upload an optional 3D model, and customize the layout and interaction settings. The gallery handles the 3D positioning, movement, hovering, dragging, snapping, and responsive behavior automatically.

Questions?

Reach out at hasanwali6890@gmail.com

Refund Policy

All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer's remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase.

64:T82c,

Preview Demo

About this Component

Scroll Video Hero turns a simple hero or showreel into a cinematic scroll interaction. The media begins compact, follows the cursor on desktop, then scales smoothly into place while its labels resize with the scroll. The same reveal is responsive on mobile with touch-friendly motion and mobile-specific positioning.

Perfect For

Portfolios, creative studios, agencies, showreels, case studies and landing pages.

Key Features

Scroll-driven media scale reveal
Responsive desktop + mobile animation
Smooth desktop mouse-follow parallax
Upload MP4, WebM, MOV or OGG, or use an embed URL
Optional poster image and fallback state
Adjustable aspect ratio, radius, fit, colors, padding and typography
Separate desktop/mobile positioning and animation sizing
Autoplay, mute and loop controls for uploaded/native video
Static-renderer fallback and reduced-motion support
Optimized offscreen updates

How It Works

Add the component to your page, choose your media, then customize Content, Media, Style, Position, Animation, Mouse Follow and Playback directly in Framer. Scroll controls the reveal automatically—no external triggers or overrides required.

Questions?

Reach out at hasanwali6890@gmail.com

Refund Policy

Because this is a digital product, all sales are final. Refunds are only considered for a confirmed critical technical issue that prevents the component from working as described and cannot be resolved. Report the issue with evidence within 14 days of purchase. Refunds are not provided for change of mind, accidental purchases, aesthetic preferences, incorrect setup, modifications or features not listed above.

65:T733,

About this Component

Infinite Parallax is a WebGL-powered media gallery built for immersive portfolio and showcase experiences. Move through an endless 2D field of images and videos using drag, wheel, or trackpad input, with smooth inertia, layered parallax, card bending, and a refractive edge effect.

Perfect For

• Creative portfolios • Photography and fashion sites • Editorial layouts • Studio and agency showcases • Experimental landing pages

Key Features

• Infinite horizontal + vertical movement • Supports both images and videos • Up to 10 media items • Drag, wheel, trackpad, and optional touch interaction • Smooth momentum and responsive motion • Cursor and movement-based parallax • Velocity-driven card distortion • Refractive edge lens with RGB split • Adjustable media zoom and video speed • Fast, Balanced, and Sharp quality modes • Responsive across desktop, tablet, and mobile • Optimized offscreen rendering and video pausing

How It Works

Drop the component into your project, upload your media, then fine-tune interaction, depth, distortion, lens strength, background, and performance directly from Framer’s property panel. No code required.

Questions?

Reach out at hasanwali6890@gmail.com

Refund Policy

All sales are final due to the digital, non-tangible nature of this product. A refund may be provided only if you experience a critical technical failure that prevents the component from working as described and the issue cannot be resolved. Refunds are not provided for buyer’s remorse, aesthetic preferences, incorrect setup, or modifications made after purchase. Please report confirmed technical failures with evidence within 14 days of purchase.

66:T8eb,

Preview demo

About this Component

Create an immersive 3D image tunnel that moves smoothly through depth as you scroll.

Infinite 3D Tunnel arranges your images across repeating 3D layers, creating a continuous perspective experience with smooth inertia, responsive scaling, and subtle depth-based fades. Images entering from the back fade in naturally instead of appearing instantly, keeping the tunnel seamless and polished.

Perfect For

• Creative portfolios • Photography showcases • Agency and studio websites • Experimental landing pages • Immersive galleries • Fullscreen hero sections

Key Features

• Infinite looping 3D image tunnel • Upload up to 36 custom images • Smooth wheel and touch interaction • Responsive across desktop, tablet, and mobile • Adjustable perspective and layer spacing • Control image width, height, X/Y radius, and overall scale • Cover and contain image fitting • Custom background, overlay, and corner radius • Adjustable scroll speed, inertia, follow strength, and touch speed • Smooth depth-based fade for incoming images • Optional fixed viewport mode • Optional page scroll locking • Optimized offscreen animation handling • Static renderer support for Framer • Organized property controls • No code required

How It Works

Add your images, customize the tunnel layout and depth, then scroll to move through the gallery. Layers continuously recycle through 3D space, creating an endless tunnel while maintaining smooth momentum and responsive behavior.

Questions?

Reach out at hasanwali6890@gmail.com

Refund Policy

67:T7c7,

About this Component

Smoke Preloader creates a cinematic fullscreen loading experience with a smooth 0–100 counter followed by a WebGL smoke reveal.

The animation stays responsive across desktop, tablet, and mobile, with dedicated mobile cropping so the smoke keeps its intended proportions instead of stretching on narrow screens.

Perfect For

• Creative portfolios • Agency and studio sites • Product launches • Editorial websites • Premium landing pages

Key Features

• Smooth 0–100 animated counter • WebGL smoke reveal powered by Three.js • Upload your own smoke sprite sheet • Responsive mobile smoke cropping • Adjustable mobile breakpoint and desktop ratio • Optional scoped scroll lock during the intro • Custom cover and counter colors • Full Framer font controls • Counter X/Y positioning • Adjustable counter, fade, hold, delay, and reveal timing • Custom sprite columns and rows • Adjustable render scale • Static-renderer safe • WebGL fallback and cleanup

How It Works

Place the component inside a fullscreen frame or overlay, upload your smoke sprite sheet, match the Columns and Rows values, then customize the timing, typography, colors, and responsive settings directly in Framer. Once the animation finishes, the component releases scrolling automatically and can hide itself to reveal the page underneath.

Questions?

Reach out at hasanwali6890@gmail.com

Refund Policy

68:T85f,

Preview Demo

About this Component

Spiral Gallery is a responsive WebGL media gallery that wraps images and videos around a 3D helix and drives the full sequence from page scroll. Cards climb through the spiral while guide lines counter-move and oversized headlines sweep across the viewport for a cinematic, editorial feel.

Perfect For

• Creative portfolios • Agency & studio sites • Case studies • Fashion & editorial • Art direction • Product showcases

Key Features

• Mix images and muted looping videos across up to 9 media slots • Individual link for every media item • Optional ripple, refraction, dent, tilt, glow, and grow hover interaction • Custom top/bottom headlines and tagline • Native Framer font controls and text-position controls • Background, text, guide color, and guide opacity controls • Responsive desktop, tablet, and mobile framing • Adjustable scroll follow delay and WebGL resolution • Static-renderer support and offscreen rendering pause • Natural page scrolling with no scroll hijacking

How It Works

Place the component inside a 100vh sticky frame, then place that frame inside a taller scrolling section. The height of the outer section determines the scroll duration. Add your media, links, copy, and styling from Framer’s property panel, then publish.

Questions? Reach out at hasanwali6890@gmail.com

Refund Policy

All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component has a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer’s remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase.

69:T8bd,

Demo link

About this Component

Dither Blur Carousel is a WebGL powered media carousel that combines a curved 3D layout with progressive blur, dithering, motion bending, hover focus, and an interactive cursor trail.

Built for both images and videos, the component gives you a highly visual way to showcase projects while keeping every major part of the experience customizable directly inside Framer.

Perfect For

• Portfolio showcases • Creative studios and agencies • Case studies • Editorial layouts • Campaign and landing pages • Experimental media galleries

Key Features

• Supports both images and videos • Curved 3D carousel layout • Smooth drag and wheel interaction • Optional snapping and click-to-focus • Adjustable motion bend and inertia • Progressive blur and streak effects • Fully customizable dither effect • Hover focus with adjustable strength, falloff, and timing • Interactive cursor trail with warp, radius, decay, and dither controls • Custom project titles with typography, colors, positioning, and X/Y offsets • Optional dither-based intro animation • Keyboard navigation • Responsive sizing • Static renderer support for Framer • Optimized off-screen rendering and video playback • Performance controls for WebGL quality

How It Works

Add your media, customize the carousel layout and visual effects, then tune the interaction directly from the Framer property panel. Images and videos are handled inside the same media list, while the layout, motion, blur, dither, hover behavior, cursor trail, titles, intro, and performance can all be adjusted without touching code.

Questions?

Hit me up at hasanwali6890@gmail.com

Refund Policy

Due to the digital nature of this component, all sales are final. If the component has a verified technical issue that prevents it from working as described and I’m unable to resolve it, please contact me for support and refund consideration.

6a:T870,

About this Component

3D ASCII SVG transforms your own SVG artwork into a responsive, interactive 3D ASCII experience directly in Framer. Upload a logo, symbol, or graphic and turn it into dimensional geometry rendered with live ASCII characters, lighting, motion, drag interaction, and scroll-driven transformations.

Perfect For

• Creative portfolios • Interactive landing pages • Brand and logo showcases • Experimental hero sections • Digital art experiences

Key Features

• Upload your own SVG • Real 3D SVG extrusion and depth • Live ASCII character rendering • Native Framer font controls • Custom ASCII and background colors • Adjustable character density and spacing • Full X, Y, Z scale and rotation controls • Camera position, FOV, azimuth, and elevation • Custom lighting, reflections, and roughness • Mouse drag interaction with damping • Optional touch interaction • Smooth idle floating and rocking motion • Up to 5 scroll-driven transitions • Left, Center, Right, Top, and Bottom viewport anchors • Pixel-based edge positioning for responsive layouts • Rotations up to ±3000° • Adjustable mesh quality and performance controls

How It Works

Upload an SVG, customize its ASCII appearance and 3D form, then position and animate it using Framer controls. Scroll transitions can be connected to named sections and independently control scale, depth, rotation, and viewport-anchored placement.

Questions?

Reach out at hasanwali6890@gmail.com

Refund Policy

6b:T77f,

About this Component

Scroll 3D Model is a responsive WebGL component that lets you upload your own GLB, GLTF, or OBJ model and animate it through smooth scroll-driven 3D transitions directly in Framer.

Perfect For

• Interactive landing pages • Product showcases • Portfolio experiences • 3D storytelling • Experimental websites

Key Features

• Upload GLB, GLTF, or OBJ models • Preserve original textures, PBR materials, and supported model lights • Optional material color override • Up to 5 scroll-driven transitions • Responsive X, Y, and Z positioning • Independent scale and rotation controls • Rotations up to ±3000° for multi-revolution motion • Camera position, target, FOV, azimuth, and elevation controls • Model or custom studio lighting • Optional idle float and rocking motion • DPR and FPS performance controls • Offscreen rendering pause and deferred loading • Static-renderer support for Framer previews

How It Works

Upload your model, set its starting transform and camera, then add up to five transitions. Assign each transition to a named Framer section and control its relative scale, position, and rotation as that section scrolls through the viewport.

Questions? Reach out at hasanwali6890@gmail.com

Refund Policy

6c:T70d,

About this component

Haytham Mask Menu is a 2-in-1 fullscreen navigation system for Framer.

It includes both a customizable masked menu reveal component and a MenuToggle code override, giving you the full open/close interaction in one setup.

Connect your own Framer menu, apply the override to any button or frame, and the menu reveals from the center in two stages—expanding vertically first, then horizontally.

Features

• 2-in-1 component + code override • Connect your own Framer menu • Fullscreen or contained layout • Adjustable reveal duration • Custom starting mask width and height • Adjustable z-index • Optional force-fill menu layout • Smooth opening, closing, and mid-animation reversal • Static Canvas preview states • No third-party packages • No global DOM searching • Marketplace-ready static rendering

How To Use

Add the Mask Menu component, connect your menu, then apply the included MenuToggle override to your hamburger, icon, button, or frame.

The published version always starts closed, while the Canvas preview control lets you inspect Closed, Half, or Open states while designing.

Need help? Contact: hasanwali6890@gmail.com

Refund Policy

All sales are final for this digital product. Refunds are available only for confirmed critical technical issues that prevent the component's core functionality and cannot be resolved within a reasonable timeframe.

Refunds are not provided for buyer's remorse, design preference, incorrect setup, or modifications made after purchase.

6d:T7ab,

About this Component

Haytham Fan Intro is a cinematic hero preloader that turns a set of images into a layered fan-out sequence before opening into a fullscreen hero. The center frame expands into the final hero while the surrounding media settles away, creating a smooth editorial handoff with animated title and subtitle reveals.

Perfect For

Portfolio launches, creative studios, campaign pages, fashion sites, editorial experiences, product launches, and premium landing pages.

Key Features

• Fan-out image preloader with a 0–100 counter • Hero media: Image, Video, or Solid color • Seamless center-frame-to-hero transition • Responsive fan geometry and typography • Manual line-by-line title and subtitle control • Adjustable title and subtitle widths • Native Framer font controls • Hero fit, position, tint, filter, and video loop controls • Animation speed and start delay controls • Optional component-scoped scroll lock • Static-renderer fallback for Marketplace previews • Multi-instance-safe DOM and event handling

How It Works

Add your fan images, choose the final hero media, then tune the layout, typography, colors, and motion from the Property Controls. Use Manual Lines when you want exact editorial line breaks.

Questions? Reach out at hasanwali6890@gmail.com

Refund Policy

6e:T872,

About this Component Lens Warp Reveal is an immersive WebGL image transition component for Framer that transforms one image into the next through an expanding lens effect.

Built for scroll-driven experiences, it combines smooth reveals with a responsive magnifying warp for a fluid, cinematic feel.

Perfect For • Portfolio and case study pages • Editorial and storytelling layouts • Product showcases • Fashion and photography websites • Scroll-driven landing pages • Immersive visual experiences

Key Features • Upload up to 8 responsive images • Dynamic trigger controls based on uploaded images • Section Name, Scroll Progress, and Manual trigger modes • Adjustable viewport trigger position • Optional click-to-advance interaction • Custom transition duration • Adjustable bubble size and lens focus • Distortion strength and vertical stretch controls • Responsive image cover behavior • WebGL pixel-density control • Static renderer support for Framer Canvas and Marketplace previews • Optimized offscreen rendering • No external packages required

How It Works Add your images, choose a trigger mode, and customize the warp effect directly from the Property Controls.

With Section Names, each transition can connect to a named Framer section or scroll section. Scroll Progress distributes image changes across the surrounding scroll area, while Manual mode works with Click Advance.

For scroll-driven layouts, place the component inside a sticky frame within a taller scrolling section.

Questions? Reach out at hasanwali6890@gmail.com

Refund Policy All sales are final. Refunds are only available for a confirmed critical technical failure that prevents the component’s core functionality and cannot be reasonably resolved. Issues must be reported with supporting evidence within 14 days of purchase. Refunds are not provided for buyer’s remorse, aesthetic preferences, or modification/customization requests.

6f:T860,

About this Component

Logo on scroll v2 is a self-contained scroll animation for turning text or an uploaded logo into a responsive moving brand element. It owns its own scroll track and sticky viewport stage, so there’s no need to build a separate tall parent or grandparent container.

Animate between virtually any viewport position using top, center, or bottom anchors with left, center, or right alignment. Control the start and final scale, offsets, breakpoint behavior, scroll length, motion range, easing, and canvas preview. Enable Keep Final to leave the finished logo pinned in place after the morph while the rest of the page continues scrolling.

Perfect For: • SaaS and product landing pages • Brand-led hero transitions • Logo-to-navigation moments • Editorial and portfolio sites • Scroll-driven storytelling

Key Features: • Self-contained scroll scene • Text or custom image/logo • Any-position-to-any-position movement • Independent start and final scale • Responsive mobile scaling • Adjustable scroll length and motion range • Linear, Power2 Out, and Power3 InOut easing • Keep Final pinned state • Canvas animation preview • Accessible image alt text • No external packages

How It Works: Drop the component into normal page flow, choose Text or Image, set the start and final positions, then adjust Scroll Scene Length and Motion Start/End. The component handles the sticky scroll behavior internally.

Questions? Reach out at hasanwali6890@gmail.com

Refund Policy All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer's remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase.

70:T9e5,

About this Component

Logo on scroll creates a responsive scroll-driven transition where a large centered logo shrinks into a fully functional navigation bar while the surrounding panel expands to fill the viewport.

Use a text logo or upload your own image, choose between solid, image, or video backgrounds, and fine-tune the animation for desktop and mobile independently.

Perfect For

Creative portfolios, agencies, studios, editorial sites, landing pages, brand showcases, and websites that need a strong transition from hero content into navigation.

Key Features

Scroll-driven panel expansion
Logo-to-navbar transition
Image or text logo support
Solid, image, and video backgrounds
Up to 4 customizable navigation links
Optional persistent navbar
Independent mobile animation toggle
Mobile link Reveal / Always / Hide modes
Adjustable mobile logo positioning
Responsive desktop and mobile layouts
Custom typography and spacing
Scroll smoothing and animation distance controls
Canvas preview control
Static renderer support
Offscreen animation pausing
Organized property controls

How It Works

Place the component inside a sticky viewport-height frame within a taller scrolling section. As the page scrolls, the panel expands while the logo scales down and docks into the navbar. Choose Scroll Away to keep the navigation tied to the section, or Stay Fixed to keep the completed navbar visible throughout the rest of the page.

Mobile behavior can use the same reveal animation or skip directly to the completed navigation layout.

Questions?

Reach out at hasanwali6890@gmail.com

Refund Policy

All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that cannot be reasonably resolved. Refunds are not provided for buyer's remorse, aesthetic preference, or post-purchase modification requests. Report confirmed technical failures with supporting evidence within 14 days of purchase.

71:T7ce,

About this Component

Sticky Mask Gallery is a scroll-driven image gallery built for cinematic sticky sections. Images stay visually locked in place while rounded containers move across them, creating a clean masked reveal with a persistent gap between each transition.

Perfect For

Product pages, landing pages, portfolios, editorial layouts, feature showcases, and immersive storytelling sections.

Key Features

• Stationary-image masked reveal • Smooth multi-image scroll progression • Persistent gap between outgoing and incoming containers • Fluid or fixed responsive geometry • Adjustable radius, gap, side inset, and vertical inset • Image fit and focal-position controls • Custom gap and image background colors • Adjustable scroll start, end, and sticky offset • Supports up to 12 images • Static-renderer fallback for Marketplace previews • Offscreen animation pausing for better performance • Fully scoped behavior with no page-wide scroll manipulation

How It Works

Place the component inside a sticky frame, then place that sticky frame inside a taller scrolling section. A parent height around 2000–3000px works well as a starting point. The outer section supplies the scroll distance while the component handles the image transitions automatically.

Questions?

Reach out at hasanwali6890@gmail.com

Refund Policy

72:T7a5,

About this Component

Haytham ASCII Reveal transforms an image stack with a scroll-driven ASCII dissolve. Instead of a simple wipe or crossfade, each transition is carried by a customizable grid of characters that scatters across the reveal edge for a tactile, digital look.

Perfect For:

Creative portfolios, editorial layouts, launch pages, art direction, product storytelling, and experimental landing pages.

Key Features:

• Upload up to 12 responsive images • Two scroll modes: Internal or Framer Scroll Sections • In Sections mode, each Scroll Section controls one image transition • Transition begins when the section top reaches the bottom of the viewport • Section height determines the duration of that transition • Adjustable cell size, colors, glyph set, font, spread, scatter, core width, and sparsity • Cover/Contain image fitting with X/Y focal-point controls • Responsive, static-renderer safe, and optimized to pause off-screen • No external animation library required

How It Works:

Use Internal mode for an automatically detected scroll track, or switch to Sections and enter your Framer Scroll Section IDs in order. Image 1→2 uses ID 1, Image 2→3 uses ID 2, and so on. For N images, use N−1 section IDs.

Questions?

Reach out at hasanwali6890@gmail.com

Refund Policy

73:T882,

About this Component

Ribbon gallery is an immersive WebGL portfolio carousel for Framer. Projects travel through an infinite ribbon with velocity bending, inertia, pointer parallax, smooth entry fades, hover ripples, media reveals, and a cinematic pill-to-gallery preloader.

Perfect For: Creative portfolios, agencies, case studies, photography, motion work, product showcases, and experimental landing pages.

Key Features: • 1 → 3 pill preloader that morphs into the first three projects • Infinite ribbon with drag, wheel/trackpad control, inertia, bend, and parallax • Image or video thumbnails for every project • Optional image/video hover reveal with shared ripple controls • Reveal size, softness, timing, refraction, glow, tilt, and ripple speed controls • Smooth neighboring and returning card fade-ins • Editable project names, links, labels, sizing, spacing, radius, and start position • Optional floor grid • Optional Scroll Up, Scroll Down, and Card Click audio with volume controls • Videos pause offscreen; reveal videos play only when needed • Render loop sleeps while idle and pauses offscreen or when the tab is hidden • Static Framer Canvas/export fallback

How It Works: Add your projects, choose image or video media, then customize the layout and motion. On load, one pill splits into three and morphs into Projects 1–3. Neighboring cards fade in afterward. Drag or scroll to explore, hover any card for the ripple/reveal, and assign links as needed. Sound is optional and off by default.

Questions? Reach out at hasanwali6890@gmail.com

Refund Policy: All sales are final for this non-tangible digital product. Refunds are available only for a confirmed critical technical failure that prevents the core function and cannot be reasonably resolved. No refunds are provided for buyer’s remorse, aesthetic preference, or post-purchase modification requests. Confirmed failures must be reported with evidence within 14 days of purchase.

74:T784,

About this Component

Haytham Scroll Grid is a scroll-driven image gallery that transforms a repeating image grid as users move through the page. Choose Vertical for expanding horizontal rows, or Horizontal to convert vertical page scroll into a sticky sideways sequence of vertical image columns. Both directions preserve the same responsive growth effect and can be tuned for desktop and mobile.

Perfect For

• Creative portfolios • Agency and studio sites • Case-study showcases • Editorial galleries • Product and campaign pages

Key Features

• Vertical + horizontal scroll modes • Horizontal travel in either Right → Left or Left → Right • Adjustable horizontal start/end points and scroll length • Responsive desktop/mobile start and end growth values • Custom row/column count and images per group • Shared gap, padding, aspect ratio, crop and corner-radius controls • Optional scroll smoothing • Repeating image pool for fast setup • Static Canvas/export preview • Off-screen animation pausing for better performance • No external packages or page-wide scroll locking

Upload your images, choose a direction, then shape the motion through the organized Layout, Growth, H Scroll and Appearance controls.

Questions? Reach out to me at hasanwali6890@gmail.com

Refund Policy: All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer's remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase.

75:T859,

About this Component

Haytham Search Flow is a scroll-driven interaction that transforms scattered feature labels into a focused search experience. As the page moves, feature pills converge toward the center, the opening message transitions away, and the scene resolves into a final result with a clickable search-style action.

Perfect For

Creative portfolios, product sites, AI/SaaS experiences, editorial layouts, landing pages, feature presentations, and storytelling sections.

Key Features

• Scroll-driven multi-stage transformation • Up to 12 editable feature labels • Individual X/Y offsets for every feature • Seven pre-positioned scattered defaults • Editable opening, result, body, and search copy • Optional clickable search action • Custom decorative mesh image support • Built-in gradient mesh fallback with editable colors and blur • Separate desktop/mobile mesh scaling • Display, body, and label typography controls • Background, text, surface, and stroke styling • Responsive breakpoint, spacing, widths, and mobile type controls • Adjustable scroll length • Accessible heading and scene-label controls

How It Works

Drop the component into your page and scroll. It creates its own pinned scroll sequence, so no extra sticky wrapper is required. Edit the labels, reposition each one with X/Y offsets, customize the copy and visuals, and add a destination to the search action if needed.

Questions? Reach out at hasanwali6890@gmail.com

Refund Policy

61:["$","$L62",null,{"value":{"fallback":{"$inf$activity-creator-10767168-8381-4f2b-9206-2d6c344aae23-all:/unified/creator/10767168-8381-4f2b-9206-2d6c344aae23/activity/":[{"data":[{"id":"01a0be1f-2aeb-75bb-8289-5e8ea3580ccc","type":"component.created","target":{"type":"component","id":"hYoYckxP4kg8dwLowVze","preview":"Immersive 3D Gallery","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a0be1f-002c-75da-afa6-18d5c6415847.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","slug":"hasan-wali","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-20T09:21:48.779Z","latestAt":"2026-09-20T09:21:48.779Z"},{"id":"01a0bd3c-9573-753a-b79a-bf500c078090","type":"component.created","target":{"type":"component","id":"O9ivpbHOK2muKAwfKLn6","preview":"Scroll Video Hero","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a0bd3c-8102-7226-8805-17535f80590e.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","slug":"hasan-wali","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-20T05:14:19.379Z","latestAt":"2026-09-20T05:14:19.379Z"},{"id":"01a0bd13-1283-70de-a9e4-fdf70e4e3a68","type":"component.created","target":{"type":"component","id":"2BgXCsL6Zi8VMKqOrsxj","preview":"Infinite Parallax","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a0bd12-fe47-747d-9c3c-c77dbf6072ea.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","slug":"hasan-wali","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-20T04:28:58.883Z","latestAt":"2026-09-20T04:28:58.883Z"},{"id":"01a0bbd9-18da-74eb-ad4b-3e1d88fb536c","type":"comment.reply","target":{"type":"post","id":"01a0b8bf-196c-7757-8fe7-5039f1c14022","preview":"Infinite 3D Tunnel","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a0b8bf-02b7-7301-832a-8ada6149eb3a.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0b8bf-196c-7757-8fe7-5039f1c14022","like":{"count":1,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a0bbd9-18c3-72aa-bc8e-7a5880621787","preview":"Thanks mate!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thanks mate!"}]},{"type":"paragraph"}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a0b8bf-196c-7757-8fe7-5039f1c14022","like":{"count":0,"liked":false},"reply":{"parentCommentId":"01a0b99b-a78e-71af-a38d-edf9f8050113"},"repost":null}},"actors":[{"id":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","slug":"hasan-wali","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-19T22:46:02.202Z","latestAt":"2026-09-19T22:46:02.202Z"},{"id":"01a0b8bf-1b86-76ea-8770-2273c479d04d","type":"component.created","target":{"type":"component","id":"fcZKiB3SFiTXzhg9FD3l","preview":"Infinite 3D Tunnel","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a0b8bf-02b7-7301-832a-8ada6149eb3a.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","slug":"hasan-wali","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-19T08:18:47.302Z","latestAt":"2026-09-19T08:18:47.302Z"},{"id":"01a0ae79-4fe0-7360-9ab4-ef7f9feb5fb6","type":"component.created","target":{"type":"component","id":"PxWsczyu5uitHlhUr000","preview":"Haytham Preloader 29","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a0ae79-2177-75bf-8d84-3b8f21e8adee.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","slug":"hasan-wali","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-17T08:26:21.024Z","latestAt":"2026-09-17T08:26:21.024Z"},{"id":"01a0a973-077e-761c-a2be-b7a6adc3942f","type":"component.created","target":{"type":"component","id":"ql8ePGRjOEp8qB47QQjb","preview":"Spiral Gallery FX","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a0a972-b2ae-753e-a6c4-b1aefeb7b30e.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","slug":"hasan-wali","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-16T09:01:23.198Z","latestAt":"2026-09-16T09:01:23.198Z"},{"id":"01a0a8e9-2efe-771f-86fa-4241ff5bdb27","type":"component.created","target":{"type":"component","id":"WXAS47Ju17SFCKuYrWB0","preview":"Dither Blur carousel","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a0a8e9-1834-777a-80ba-5ae55c2e1100.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","slug":"hasan-wali","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-16T06:30:49.342Z","latestAt":"2026-09-16T06:30:49.342Z"},{"id":"01a094b3-e1b7-7452-bf60-80cfb85adf03","type":"component.created","target":{"type":"component","id":"aZSsTCVwHuQJBNdxT8A3","preview":"Scroll 3D model SVG","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a094b3-c594-75c8-958f-75e4b70cb121.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","slug":"hasan-wali","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-12T08:20:11.831Z","latestAt":"2026-09-12T08:20:11.831Z"},{"id":"01a092df-ff34-77ea-a241-edb4c51575bc","type":"component.created","target":{"type":"component","id":"DndIjZJnSRLoHodSGKC4","preview":"Scroll 3D model","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a092df-e83c-720d-bf0d-04ba333e1a48.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","slug":"hasan-wali","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-11T23:49:08.532Z","latestAt":"2026-09-11T23:49:08.532Z"},{"id":"01a08a72-8735-7039-8b00-7d441247bb91","type":"component.created","target":{"type":"component","id":"GB192MKQQ6mBNmYg4Hgn","preview":"Menu Background v4","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a08a72-72f1-759e-a22c-4340942badbe.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","slug":"hasan-wali","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-10T08:32:36.660Z","latestAt":"2026-09-10T08:32:36.660Z"},{"id":"01a08a14-8235-771d-8184-e70fb2fc92cf","type":"component.created","target":{"type":"component","id":"tH5lCFQ37McaAoTbZZfH","preview":"Haytham Preloader 28","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a08a14-6b62-738a-bb20-17f75ea0624f.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","slug":"hasan-wali","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-10T06:49:54.997Z","latestAt":"2026-09-10T06:49:54.997Z"},{"id":"01a0804c-c0cd-75eb-ad25-62e0fd34fc78","type":"component.created","target":{"type":"component","id":"DhsZ4kk9oUNfR3i3RxsF","preview":"Lens Warp Reveal","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a0804c-aa42-7634-9a05-10c89d20d59b.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","slug":"hasan-wali","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-08T09:15:08.877Z","latestAt":"2026-09-08T09:15:08.877Z"},{"id":"01a07f5f-bf2d-777f-a430-75aa664f1ea4","type":"component.created","target":{"type":"component","id":"atMBLGQZgVuS2Uwu479p","preview":"Logo on Scroll v2","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a07f5f-a1e6-7402-87d4-930f260287fb.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","slug":"hasan-wali","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-08T04:56:16.429Z","latestAt":"2026-09-08T04:56:16.429Z"},{"id":"01a07b5b-9390-75e9-a1a2-492040f3a496","type":"component.created","target":{"type":"component","id":"AfWuvtoeLj4QSBjsn51V","preview":"Logo on Scroll v1","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a07b5b-7d70-74fe-80ec-7bd46561fb79.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","slug":"hasan-wali","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-07T10:13:14.256Z","latestAt":"2026-09-07T10:13:14.256Z"},{"id":"01a07b52-3126-7177-aed6-bce82d84b329","type":"component.created","target":{"type":"component","id":"8jWolhz2PUhYzqONvjgb","preview":"Sticky Mask Gallery","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a07b52-1b51-726e-894c-7bd807ced970.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","slug":"hasan-wali","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-07T10:02:59.238Z","latestAt":"2026-09-07T10:02:59.238Z"},{"id":"01a0709f-ec93-7303-ae5e-f5ddb832779c","type":"component.created","target":{"type":"component","id":"aca8qtMitFImZkpDe6bo","preview":"ASCII reveal FX","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a0709f-8b65-71fa-9ad2-1db2455724dc.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","slug":"hasan-wali","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-05T08:12:04.115Z","latestAt":"2026-09-05T08:12:04.115Z"},{"id":"01a065fe-8966-7739-9161-97ecae329ff1","type":"component.created","target":{"type":"component","id":"lc7b6ye024jenJP4GY3M","preview":"Ribbon Gallery","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a065fe-6f9e-7529-bbf5-ce6b2a419633.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","slug":"hasan-wali","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-03T06:39:35.270Z","latestAt":"2026-09-03T06:39:35.270Z"},{"id":"01a06081-1664-743d-8743-2ee1d539b63f","type":"component.created","target":{"type":"component","id":"MZfnf5qIQJ3HyCcOaotk","preview":"Parallax Grid Scroll","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a06080-9589-75a3-935e-e6fcf031c702.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","slug":"hasan-wali","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-02T05:04:27.748Z","latestAt":"2026-09-02T05:04:27.748Z"},{"id":"01a05b96-0f1e-702a-9473-25312a3a74a4","type":"component.created","target":{"type":"component","id":"946KvxbwbncIw1jJTbNY","preview":"Scroll Search Morph","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a05b95-f9e9-77a7-9770-f89557377ed3.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","slug":"hasan-wali","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-01T06:09:16.062Z","latestAt":"2026-09-01T06:09:16.062Z"}],"pagination":{"next":"MjAyNi0wOS0wMVQwNjowOToxNi4wNjJafDAxYTA1Yjk2LTBmMWUtNzAyYS05NDczLTI1MzEyYTNhNzRhNA","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:10767168-8381-4f2b-9206-2d6c344aae23:/unified/posts/?creator=10767168-8381-4f2b-9206-2d6c344aae23&with=reposts":[{"data":[{"id":"01a0be1f-28bd-738d-811f-cf2e0e40c80d","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"hYoYckxP4kg8dwLowVze","resolved":true,"title":"Immersive 3D Gallery","body":"$63","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"About this Component"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Immersive 3D Gallery is an interactive WebGL gallery built for portfolios, showcases, creative websites, and experimental experiences."}]},{"type":"paragraph","content":[{"type":"text","text":"Choose between three completely different gallery modes — Tube, Sphere, and Rubens — each with its own movement and interaction style. Upload your own images, add project names and links, import a custom 3D model, and fine-tune the entire experience directly inside Framer."}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect For"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"• Creative portfolios • Project showcases • Photography websites • Art and fashion sites • Experimental landing pages • Immersive digital experiences"}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"• Three gallery modes: Tube, Sphere & Rubens • Upload your own project images • Custom project names, descriptions & links • Upload your own GLB/GLTF 3D model • Interactive scroll-driven gallery movement • Draggable 3D sphere with smooth momentum • Automatic snapping in Sphere mode • Infinite rotating Tube gallery • Dynamic blurred backgrounds in Rubens mode • Custom cursor and project labels • Adjustable gallery radius, image size & spacing • Control scroll speed, rotation, drag feel & snapping • Custom 3D model scale, position & opacity • Separate mobile model scaling "}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Add your projects from the property panel, choose a gallery mode, upload an optional 3D model, and customize the layout and interaction settings. The gallery handles the 3D positioning, movement, hovering, dragging, snapping, and responsive behavior automatically."}]},{"type":"customHeading","content":[{"type":"text","text":"Questions?"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Reach out at "},{"type":"text","text":"hasanwali6890@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hasanwali6890@gmail.com","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"Refund Policy"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer's remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase."}]}]},"introduction":"Three interactive 3D gallery modes","slug":"immersive-3d-gallery","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a0be1f-002c-75da-afa6-18d5c6415847.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-20T09:21:47.660Z","updatedAt":"2026-09-20T10:34:57.766Z","publishedAt":"2026-09-20T09:21:47.657Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Vortex-Gallery-4BehR0.js@FOmEz0oTUik0n5tlGul9","previewUrl":"https://relaxed-method-149130.framer.app","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"FOmEz0oTUik0n5tlGul9","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-20T09:21:48.221Z","updatedAt":"2026-09-20T09:21:48.221Z"},{"id":"01a0bd3c-934e-772d-9051-4546d34fd3ec","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"O9ivpbHOK2muKAwfKLn6","resolved":true,"title":"Scroll Video Hero","body":"$64","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Preview Demo","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://informal-designer-206486.framer.app","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"About this Component","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Scroll Video Hero turns a simple hero or showreel into a cinematic scroll interaction. The media begins compact, follows the cursor on desktop, then scales smoothly into place while its labels resize with the scroll. The same reveal is responsive on mobile with touch-friendly motion and mobile-specific positioning."}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect For","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Portfolios, creative studios, agencies, showreels, case studies and landing pages."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll-driven media scale reveal"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive desktop + mobile animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth desktop mouse-follow parallax"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Upload MP4, WebM, MOV or OGG, or use an embed URL"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional poster image and fallback state"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable aspect ratio, radius, fit, colors, padding and typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Separate desktop/mobile positioning and animation sizing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Autoplay, mute and loop controls for uploaded/native video"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static-renderer fallback and reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optimized offscreen updates"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Add the component to your page, choose your media, then customize Content, Media, Style, Position, Animation, Mouse Follow and Playback directly in Framer. Scroll controls the reveal automatically—no external triggers or overrides required."}]},{"type":"customHeading","content":[{"type":"text","text":"Questions?"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Reach out at "},{"type":"text","text":"hasanwali6890@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hasanwali6890@gmail.com","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"Refund Policy"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Because this is a digital product, all sales are final. Refunds are only considered for a confirmed critical technical issue that prevents the component from working as described and cannot be resolved. Report the issue with evidence within 14 days of purchase. Refunds are not provided for change of mind, accidental purchases, aesthetic preferences, incorrect setup, modifications or features not listed above."}]},{"type":"paragraph"}]},"introduction":"Cinematic video reveal on scroll","slug":"scroll-video-hero","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a0bd3c-8102-7226-8805-17535f80590e.png","metadata":{"tint":{"h":0,"s":93,"l":24},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-20T05:14:18.239Z","updatedAt":"2026-09-20T05:14:18.239Z","publishedAt":"2026-09-20T05:14:18.236Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://informal-designer-206486.framer.app","price":"13","paymentUrl":"https://contra.com/payment-link/8IiTrIGR-scroll-video-hero-cinematic-video-reveal-on-scroll","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"7JTNdR8EPuMD8wC8Dd7r","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-20T05:14:18.830Z","updatedAt":"2026-09-20T05:14:18.830Z"},{"id":"01a0bd13-1074-760f-ab95-13e482ed80f8","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"2BgXCsL6Zi8VMKqOrsxj","resolved":true,"title":"Infinite Parallax","body":"$65","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"About this Component"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Infinite Parallax is a WebGL-powered media gallery built for immersive portfolio and showcase experiences. Move through an endless 2D field of images and videos using drag, wheel, or trackpad input, with smooth inertia, layered parallax, card bending, and a refractive edge effect."}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect For"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"• Creative portfolios • Photography and fashion sites • Editorial layouts • Studio and agency showcases • Experimental landing pages"}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"• Infinite horizontal + vertical movement • Supports both images and videos • Up to 10 media items • Drag, wheel, trackpad, and optional touch interaction • Smooth momentum and responsive motion • Cursor and movement-based parallax • Velocity-driven card distortion • Refractive edge lens with RGB split • Adjustable media zoom and video speed • Fast, Balanced, and Sharp quality modes • Responsive across desktop, tablet, and mobile • Optimized offscreen rendering and video pausing"}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Drop the component into your project, upload your media, then fine-tune interaction, depth, distortion, lens strength, background, and performance directly from Framer’s property panel. No code required."}]},{"type":"customHeading","content":[{"type":"text","text":"Questions? "}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Reach out at "},{"type":"text","text":"hasanwali6890@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hasanwali6890@gmail.com","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"Refund Policy"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"All sales are final due to the digital, non-tangible nature of this product. A refund may be provided only if you experience a critical technical failure that prevents the component from working as described and the issue cannot be resolved. Refunds are not provided for buyer’s remorse, aesthetic preferences, incorrect setup, or modifications made after purchase. Please report confirmed technical failures with evidence within 14 days of purchase."}]}]},"introduction":"Infinite WebGL media gallery","slug":"infinite-parallax","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a0bd12-fe47-747d-9c3c-c77dbf6072ea.png","metadata":{"tint":{"h":60,"s":53,"l":39},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-20T04:28:57.794Z","updatedAt":"2026-09-20T04:28:57.794Z","publishedAt":"2026-09-20T04:28:57.792Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://heavy-guests-997201.framer.app","price":"12","paymentUrl":"https://contra.com/payment-link/trNZI1hk-infinite-parallax-infinite-web-gl-media-gallery","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"b7JFadOVk5OTbB7KNSnG","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-20T04:28:58.356Z","updatedAt":"2026-09-20T04:28:58.356Z"},{"id":"01a0b8bf-196c-7757-8fe7-5039f1c14022","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"fcZKiB3SFiTXzhg9FD3l","resolved":true,"title":"Infinite 3D Tunnel","body":"$66","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Preview demo","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://complex-embeds-787417.framer.app","target":"_blank"}}]},{"type":"text","text":" "}]},{"type":"customHeading","content":[{"type":"text","text":"About this Component"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Create an immersive 3D image tunnel that moves smoothly through depth as you scroll."}]},{"type":"paragraph","content":[{"type":"text","text":"Infinite 3D Tunnel arranges your images across repeating 3D layers, creating a continuous perspective experience with smooth inertia, responsive scaling, and subtle depth-based fades. Images entering from the back fade in naturally instead of appearing instantly, keeping the tunnel seamless and polished."}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect For"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"• Creative portfolios • Photography showcases • Agency and studio websites • Experimental landing pages • Immersive galleries • Fullscreen hero sections"}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"• Infinite looping 3D image tunnel • Upload up to 36 custom images • Smooth wheel and touch interaction • Responsive across desktop, tablet, and mobile • Adjustable perspective and layer spacing • Control image width, height, X/Y radius, and overall scale • Cover and contain image fitting • Custom background, overlay, and corner radius • Adjustable scroll speed, inertia, follow strength, and touch speed • Smooth depth-based fade for incoming images • Optional fixed viewport mode • Optional page scroll locking • Optimized offscreen animation handling • Static renderer support for Framer • Organized property controls • No code required"}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Add your images, customize the tunnel layout and depth, then scroll to move through the gallery. Layers continuously recycle through 3D space, creating an endless tunnel while maintaining smooth momentum and responsive behavior."}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"Questions?"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Reach out at "},{"type":"text","text":"hasanwali6890@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hasanwali6890@gmail.com","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"Refund Policy"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer's remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase."}]},{"type":"paragraph"}]},"introduction":"Scroll Through Images in 3D","slug":"infinite-3d-tunnel","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a0b8bf-02b7-7301-832a-8ada6149eb3a.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-19T08:18:46.189Z","updatedAt":"2026-09-19T22:47:12.899Z","publishedAt":"2026-09-19T08:18:46.185Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://complex-embeds-787417.framer.app","price":"11","paymentUrl":"https://contra.com/payment-link/Roz2XjGD-infinite-3-d-tunnel-scroll-through-images-in-3-d","workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"DaZKNoZ62LUOf6tOdjOJ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-19T08:18:46.764Z","updatedAt":"2026-09-19T08:18:46.764Z"},{"id":"01a0ae79-4c9e-74e9-9ba4-01fdd8b59201","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"PxWsczyu5uitHlhUr000","resolved":true,"title":"Haytham Preloader 29","body":"$67","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"About this Component"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Smoke Preloader creates a cinematic fullscreen loading experience with a smooth 0–100 counter followed by a WebGL smoke reveal."}]},{"type":"paragraph","content":[{"type":"text","text":"The animation stays responsive across desktop, tablet, and mobile, with dedicated mobile cropping so the smoke keeps its intended proportions instead of stretching on narrow screens."}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect For"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"• Creative portfolios • Agency and studio sites • Product launches • Editorial websites • Premium landing pages"}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"• Smooth 0–100 animated counter • WebGL smoke reveal powered by Three.js • Upload your own smoke sprite sheet • Responsive mobile smoke cropping • Adjustable mobile breakpoint and desktop ratio • Optional scoped scroll lock during the intro • Custom cover and counter colors • Full Framer font controls • Counter X/Y positioning • Adjustable counter, fade, hold, delay, and reveal timing • Custom sprite columns and rows • Adjustable render scale • Static-renderer safe • WebGL fallback and cleanup"}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Place the component inside a fullscreen frame or overlay, upload your smoke sprite sheet, match the Columns and Rows values, then customize the timing, typography, colors, and responsive settings directly in Framer. Once the animation finishes, the component releases scrolling automatically and can hide itself to reveal the page underneath."}]},{"type":"customHeading","content":[{"type":"text","text":"Questions?"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Reach out at "},{"type":"text","text":"hasanwali6890@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hasanwali6890@gmail.com","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"Refund Policy"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer's remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase."}]}]},"introduction":"Cinematic WebGL smoke reveal","slug":"haytham-preloader-29","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a0ae79-2177-75bf-8d84-3b8f21e8adee.png","metadata":{"tint":{"h":60,"s":25,"l":13},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-17T08:26:19.506Z","updatedAt":"2026-09-17T08:26:19.506Z","publishedAt":"2026-09-17T08:26:19.503Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://sensational-difference-503833.framer.app","price":"10","paymentUrl":"https://contra.com/payment-link/DVdKXxEH-haytham-preloader-29","workshop":false,"categories":[{"id":"b42eea44-0ea9-4372-9981-70c9e68577c1","name":"Loaders","slug":"loaders"}],"lastSaveId":"RDlnGrL9KL08fnNwVj1B","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-17T08:26:20.190Z","updatedAt":"2026-09-17T08:26:20.190Z"},{"id":"01a0a973-0568-7229-b74e-455e6d140381","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"ql8ePGRjOEp8qB47QQjb","resolved":true,"title":"Spiral Gallery FX","body":"$68","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Preview Demo ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://jumpy-customer-555913.framer.app","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"About this Component","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Spiral Gallery is a responsive WebGL media gallery that wraps images and videos around a 3D helix and drives the full sequence from page scroll. Cards climb through the spiral while guide lines counter-move and oversized headlines sweep across the viewport for a cinematic, editorial feel."}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect For","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Creative portfolios • Agency & studio sites • Case studies • Fashion & editorial • Art direction • Product showcases"}]},{"type":"paragraph","content":[{"type":"text","text":"Key Features","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Mix images and muted looping videos across up to 9 media slots • Individual link for every media item • Optional ripple, refraction, dent, tilt, glow, and grow hover interaction • Custom top/bottom headlines and tagline • Native Framer font controls and text-position controls • Background, text, guide color, and guide opacity controls • Responsive desktop, tablet, and mobile framing • Adjustable scroll follow delay and WebGL resolution • Static-renderer support and offscreen rendering pause • Natural page scrolling with no scroll hijacking"}]},{"type":"paragraph","content":[{"type":"text","text":"How It Works","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Place the component inside a 100vh sticky frame, then place that frame inside a taller scrolling section. The height of the outer section determines the scroll duration. Add your media, links, copy, and styling from Framer’s property panel, then publish."}]},{"type":"paragraph","content":[{"type":"text","text":"Questions?","marks":[{"type":"bold"}]},{"type":"text","text":" Reach out at "},{"type":"text","text":"hasanwali6890@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hasanwali6890@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Refund Policy","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component has a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer’s remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase."}]},{"type":"paragraph"}]},"introduction":"3D media gallery driven by scroll","slug":"spiral-gallery-fx","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a0a972-b2ae-753e-a6c4-b1aefeb7b30e.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-16T09:01:22.036Z","updatedAt":"2026-09-16T09:01:22.036Z","publishedAt":"2026-09-16T09:01:22.033Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://jumpy-customer-555913.framer.app","price":"14","paymentUrl":"https://contra.com/payment-link/eZgNeHPq-spiral-gallery","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"FnK8TpzjbKbL8LZYBr5h","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-16T09:01:22.664Z","updatedAt":"2026-09-16T09:01:22.664Z"},{"id":"01a0a8e9-2c5c-73ea-a436-453d84d3636d","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"WXAS47Ju17SFCKuYrWB0","resolved":true,"title":"Dither Blur carousel","body":"$69","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Demo link","marks":[{"type":"link","attrs":{"rel":"noreferrer ugc","href":"https://enlivened-notes-860415.framer.app/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"About this Component","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Dither Blur Carousel is a WebGL powered media carousel that combines a curved 3D layout with progressive blur, dithering, motion bending, hover focus, and an interactive cursor trail."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for both images and videos, the component gives you a highly visual way to showcase projects while keeping every major part of the experience customizable directly inside Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect For","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Portfolio showcases • Creative studios and agencies • Case studies • Editorial layouts • Campaign and landing pages • Experimental media galleries"}]},{"type":"paragraph","content":[{"type":"text","text":"Key Features","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Supports both images and videos • Curved 3D carousel layout • Smooth drag and wheel interaction • Optional snapping and click-to-focus • Adjustable motion bend and inertia • Progressive blur and streak effects • Fully customizable dither effect • Hover focus with adjustable strength, falloff, and timing • Interactive cursor trail with warp, radius, decay, and dither controls • Custom project titles with typography, colors, positioning, and X/Y offsets • Optional dither-based intro animation • Keyboard navigation • Responsive sizing • Static renderer support for Framer • Optimized off-screen rendering and video playback • Performance controls for WebGL quality"}]},{"type":"paragraph","content":[{"type":"text","text":"How It Works","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Add your media, customize the carousel layout and visual effects, then tune the interaction directly from the Framer property panel. Images and videos are handled inside the same media list, while the layout, motion, blur, dither, hover behavior, cursor trail, titles, intro, and performance can all be adjusted without touching code."}]},{"type":"paragraph","content":[{"type":"text","text":"Questions?","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Hit me up at hasanwali6890@gmail.com"}]},{"type":"paragraph","content":[{"type":"text","text":"Refund Policy","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Due to the digital nature of this component, all sales are final. If the component has a verified technical issue that prevents it from working as described and I’m unable to resolve it, please contact me for support and refund consideration."}]}]},"introduction":"3D media carousel with dither blur","slug":"dither-blur-carousel","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a0a8e9-1834-777a-80ba-5ae55c2e1100.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-16T06:30:48.062Z","updatedAt":"2026-09-16T06:30:48.062Z","publishedAt":"2026-09-16T06:30:48.059Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://enlivened-notes-860415.framer.app","price":"15","paymentUrl":"https://contra.com/payment-link/4jKhL5DB-dither-blur-carousel-3-d-media-carousel-with-dither-blur","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"YPEN98AVSCSvFZE9tdY3","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-16T06:30:48.669Z","updatedAt":"2026-09-16T06:30:48.669Z"},{"id":"01a0a74c-49c3-7585-b64a-6c662b9732b1","title":null,"body":"

Yeap this is in Framer. 100% responsive across all the breakpoints and fully optimized. Check it out https://alert-acknowledge-860610.framer.app

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Yeap this is in Framer. 100% responsive across all the breakpoints and fully optimized. Check it out "},{"type":"text","text":"https://alert-acknowledge-860610.framer.app","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://alert-acknowledge-860610.framer.app","target":"_blank"}}]}]}]},"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/QeUalTF015Jy0001toyw0100uMxDUiL9URYBE00Ldh8N26v8o.m3u8","metadata":{"posterUrl":"https://image.mux.com/QeUalTF015Jy0001toyw0100uMxDUiL9URYBE00Ldh8N26v8o/thumbnail.webp?time=17.787","aspectRatio":"307:146","duration":25.687067}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-15T22:59:49.831Z","updatedAt":"2026-09-15T22:59:49.831Z"},{"id":"01a094b3-dfc5-7773-829a-cf8f2a98b545","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"aZSsTCVwHuQJBNdxT8A3","resolved":true,"title":"Scroll 3D model SVG","body":"$6a","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"About this Component","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"3D ASCII SVG transforms your own SVG artwork into a responsive, interactive 3D ASCII experience directly in Framer. Upload a logo, symbol, or graphic and turn it into dimensional geometry rendered with live ASCII characters, lighting, motion, drag interaction, and scroll-driven transformations."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Perfect For","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Creative portfolios • Interactive landing pages • Brand and logo showcases • Experimental hero sections • Digital art experiences"}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Key Features","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Upload your own SVG • Real 3D SVG extrusion and depth • Live ASCII character rendering • Native Framer font controls • Custom ASCII and background colors • Adjustable character density and spacing • Full X, Y, Z scale and rotation controls • Camera position, FOV, azimuth, and elevation • Custom lighting, reflections, and roughness • Mouse drag interaction with damping • Optional touch interaction • Smooth idle floating and rocking motion • Up to 5 scroll-driven transitions • Left, Center, Right, Top, and Bottom viewport anchors • Pixel-based edge positioning for responsive layouts • Rotations up to ±3000° • Adjustable mesh quality and performance controls"}]},{"type":"paragraph","content":[{"type":"text","text":"How It Works","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Upload an SVG, customize its ASCII appearance and 3D form, then position and animate it using Framer controls. Scroll transitions can be connected to named sections and independently control scale, depth, rotation, and viewport-anchored placement."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Questions?","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Reach out at "},{"type":"text","text":"hasanwali6890@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hasanwali6890@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Refund Policy","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer's remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase."}]}]},"introduction":"Turn any SVG into 3D ASCII motion","slug":"scroll-3d-model-svg","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a094b3-c594-75c8-958f-75e4b70cb121.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-12T08:20:10.798Z","updatedAt":"2026-09-13T23:35:09.992Z","publishedAt":"2026-09-12T08:20:10.795Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://neat-resource-703686.framer.app","price":"40","paymentUrl":"https://contra.com/payment-link/GDT4r9tv-scroll-3-d-model-svg","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"zZvsfJLllwnZQ8QLym3y","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-12T08:20:11.333Z","updatedAt":"2026-09-12T08:20:11.333Z"},{"id":"01a092df-fd28-7489-91d9-d28563f74649","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"DndIjZJnSRLoHodSGKC4","resolved":true,"title":"Scroll 3D model","body":"$6b","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"About this Component","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Scroll 3D Model is a responsive WebGL component that lets you upload your own GLB, GLTF, or OBJ model and animate it through smooth scroll-driven 3D transitions directly in Framer."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Perfect For","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Interactive landing pages • Product showcases • Portfolio experiences • 3D storytelling • Experimental websites"}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Key Features","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Upload GLB, GLTF, or OBJ models • Preserve original textures, PBR materials, and supported model lights • Optional material color override • Up to 5 scroll-driven transitions • Responsive X, Y, and Z positioning • Independent scale and rotation controls • Rotations up to ±3000° for multi-revolution motion • Camera position, target, FOV, azimuth, and elevation controls • Model or custom studio lighting • Optional idle float and rocking motion • DPR and FPS performance controls • Offscreen rendering pause and deferred loading • Static-renderer support for Framer previews"}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"How It Works","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Upload your model, set its starting transform and camera, then add up to five transitions. Assign each transition to a named Framer section and control its relative scale, position, and rotation as that section scrolls through the viewport."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Questions?","marks":[{"type":"bold"}]},{"type":"text","text":" Reach out at "},{"type":"text","text":"hasanwali6890@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hasanwali6890@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Refund Policy","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer's remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase."}]}]},"introduction":"3D models that transform on scroll","slug":"scroll-3d-model","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a092df-e83c-720d-bf0d-04ba333e1a48.png","metadata":{"tint":{"h":0,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-11T23:49:07.489Z","updatedAt":"2026-09-13T11:01:03.273Z","publishedAt":"2026-09-11T23:49:07.481Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://alert-acknowledge-860610.framer.app","price":"50","paymentUrl":"https://contra.com/payment-link/aB0cVepo-scroll-3-d-model","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"d1HDAfXcjdnD5VOazHrE","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-11T23:49:08.008Z","updatedAt":"2026-09-11T23:49:08.008Z"},{"id":"01a08a72-8532-762c-b455-0ad345619afa","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"GB192MKQQ6mBNmYg4Hgn","resolved":true,"title":"Menu Background v4","body":"$6c","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"About this component","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Haytham Mask Menu is a "},{"type":"text","text":"2-in-1 fullscreen navigation system for Framer","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"It includes both a customizable masked menu reveal component and a "},{"type":"text","text":"MenuToggle code override","marks":[{"type":"bold"}]},{"type":"text","text":", giving you the full open/close interaction in one setup."}]},{"type":"paragraph","content":[{"type":"text","text":"Connect your own Framer menu, apply the override to any button or frame, and the menu reveals from the center in two stages—expanding vertically first, then horizontally."}]},{"type":"customHeading","content":[{"type":"text","text":" "},{"type":"text","text":"Features","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"• 2-in-1 component + code override • Connect your own Framer menu • Fullscreen or contained layout • Adjustable reveal duration • Custom starting mask width and height • Adjustable z-index • Optional force-fill menu layout • Smooth opening, closing, and mid-animation reversal • Static Canvas preview states • No third-party packages • No global DOM searching • Marketplace-ready static rendering"}]},{"type":"customHeading","content":[{"type":"text","text":" "},{"type":"text","text":"How To Use","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Add the Mask Menu component, connect your menu, then apply the included "},{"type":"text","text":"MenuToggle override","marks":[{"type":"bold"}]},{"type":"text","text":" to your hamburger, icon, button, or frame."}]},{"type":"paragraph","content":[{"type":"text","text":"The published version always starts closed, while the Canvas preview control lets you inspect Closed, Half, or Open states while designing."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Need help?","marks":[{"type":"bold"}]},{"type":"text","text":" Contact: "},{"type":"text","text":"hasanwali6890@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hasanwali6890@gmail.com","target":"_blank"}}]},{"type":"text","text":" "}]},{"type":"customHeading","content":[{"type":"text","text":"Refund Policy","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":" All sales are final for this digital product. Refunds are available only for confirmed critical technical issues that prevent the component's core functionality and cannot be resolved within a reasonable timeframe."}]},{"type":"paragraph","content":[{"type":"text","text":"Refunds are not provided for buyer's remorse, design preference, incorrect setup, or modifications made after purchase."}]}]},"introduction":"Two-stage fullscreen menu reveal","slug":"menu-background-v4","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a08a72-72f1-759e-a22c-4340942badbe.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-10T08:32:35.621Z","updatedAt":"2026-09-10T08:32:35.621Z","publishedAt":"2026-09-10T08:32:35.617Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://tranquil-pentagon-658393.framer.app","price":"8","paymentUrl":"https://hw-6890.lemonsqueezy.com/checkout/buy/4063313c-ea17-430d-b57c-19343daa8f71","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"hvIH7tQxZ7WgakBwFasE","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-10T08:32:36.146Z","updatedAt":"2026-09-10T08:32:36.146Z"},{"id":"01a08a14-8032-7590-8b39-0a967c6eb563","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"tH5lCFQ37McaAoTbZZfH","resolved":true,"title":"Haytham Preloader 28","body":"$6d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"About this Component","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Haytham Fan Intro is a cinematic hero preloader that turns a set of images into a layered fan-out sequence before opening into a fullscreen hero. The center frame expands into the final hero while the surrounding media settles away, creating a smooth editorial handoff with animated title and subtitle reveals."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Perfect For","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Portfolio launches, creative studios, campaign pages, fashion sites, editorial experiences, product launches, and premium landing pages."}]},{"type":"paragraph","content":[{"type":"text","text":"Key Features","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Fan-out image preloader with a 0–100 counter • Hero media: Image, Video, or Solid color • Seamless center-frame-to-hero transition • Responsive fan geometry and typography • Manual line-by-line title and subtitle control • Adjustable title and subtitle widths • Native Framer font controls • Hero fit, position, tint, filter, and video loop controls • Animation speed and start delay controls • Optional component-scoped scroll lock • Static-renderer fallback for Marketplace previews • Multi-instance-safe DOM and event handling"}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"How It Works","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Add your fan images, choose the final hero media, then tune the layout, typography, colors, and motion from the Property Controls. Use Manual Lines when you want exact editorial line breaks."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Questions?","marks":[{"type":"bold"}]},{"type":"text","text":" Reach out at "},{"type":"text","text":"hasanwali6890@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hasanwali6890@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Refund Policy","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer's remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase."}]}]},"introduction":"Cinematic fan out hero preloader","slug":"haytham-preloader-28","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a08a14-6b62-738a-bb20-17f75ea0624f.png","metadata":{"tint":{"h":30,"s":70,"l":49},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-10T06:49:53.970Z","updatedAt":"2026-09-12T00:16:10.046Z","publishedAt":"2026-09-10T06:49:53.967Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://massive-accessibility-767297.framer.app","price":"10","paymentUrl":"https://hw-6890.lemonsqueezy.com/checkout/buy/248c5fa3-fe91-453f-8efd-3f2d845e96ef","workshop":false,"categories":[{"id":"b42eea44-0ea9-4372-9981-70c9e68577c1","name":"Loaders","slug":"loaders"}],"lastSaveId":"FcA1Sa1AZlPJtYUNqoGT","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-10T06:49:54.482Z","updatedAt":"2026-09-10T06:49:54.482Z"},{"id":"01a0804c-bee1-74b7-942c-e07ec60a3ea9","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"DhsZ4kk9oUNfR3i3RxsF","resolved":true,"title":"Lens Warp Reveal","body":"$6e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"About this Component","marks":[{"type":"bold"}]},{"type":"text","text":" Lens Warp Reveal is an immersive WebGL image transition component for Framer that transforms one image into the next through an expanding lens effect."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for scroll-driven experiences, it combines smooth reveals with a responsive magnifying warp for a fluid, cinematic feel."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Perfect For","marks":[{"type":"bold"}]},{"type":"text","text":" • Portfolio and case study pages • Editorial and storytelling layouts • Product showcases • Fashion and photography websites • Scroll-driven landing pages • Immersive visual experiences"}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Key Features","marks":[{"type":"bold"}]},{"type":"text","text":" • Upload up to 8 responsive images • Dynamic trigger controls based on uploaded images • Section Name, Scroll Progress, and Manual trigger modes • Adjustable viewport trigger position • Optional click-to-advance interaction • Custom transition duration • Adjustable bubble size and lens focus • Distortion strength and vertical stretch controls • Responsive image cover behavior • WebGL pixel-density control • Static renderer support for Framer Canvas and Marketplace previews • Optimized offscreen rendering • No external packages required"}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"How It Works","marks":[{"type":"bold"}]},{"type":"text","text":" Add your images, choose a trigger mode, and customize the warp effect directly from the Property Controls."}]},{"type":"paragraph","content":[{"type":"text","text":"With Section Names, each transition can connect to a named Framer section or scroll section. Scroll Progress distributes image changes across the surrounding scroll area, while Manual mode works with Click Advance."}]},{"type":"paragraph","content":[{"type":"text","text":"For scroll-driven layouts, place the component inside a sticky frame within a taller scrolling section."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Questions?","marks":[{"type":"bold"}]},{"type":"text","text":" Reach out at "},{"type":"text","text":"hasanwali6890@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hasanwali6890@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Refund Policy","marks":[{"type":"bold"}]},{"type":"text","text":" All sales are final. Refunds are only available for a confirmed critical technical failure that prevents the component’s core functionality and cannot be reasonably resolved. Issues must be reported with supporting evidence within 14 days of purchase. Refunds are not provided for buyer’s remorse, aesthetic preferences, or modification/customization requests."}]}]},"introduction":"WebGL image transitions on scroll","slug":"lens-warp-reveal","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a0804c-aa42-7634-9a05-10c89d20d59b.png","metadata":{"tint":{"h":0,"s":67,"l":14},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-08T09:15:07.870Z","updatedAt":"2026-09-13T10:35:05.656Z","publishedAt":"2026-09-08T09:15:07.867Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://comprehensive-reflect-424847.framer.app","price":"9","paymentUrl":"https://hw-6890.lemonsqueezy.com/checkout/buy/89d48e63-1921-4019-b06e-fe3729095254","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"t5MbeCyG4M0Ussa8Qs7w","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-08T09:15:08.385Z","updatedAt":"2026-09-08T09:15:08.385Z"},{"id":"01a07f5f-bd36-71f2-b2d6-9c31a0626fa2","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"atMBLGQZgVuS2Uwu479p","resolved":true,"title":"Logo on Scroll v2","body":"$6f","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"About this Component","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Logo on scroll v2 is a self-contained scroll animation for turning text or an uploaded logo into a responsive moving brand element. It owns its own scroll track and sticky viewport stage, so there’s no need to build a separate tall parent or grandparent container."}]},{"type":"paragraph","content":[{"type":"text","text":"Animate between virtually any viewport position using top, center, or bottom anchors with left, center, or right alignment. Control the start and final scale, offsets, breakpoint behavior, scroll length, motion range, easing, and canvas preview. Enable Keep Final to leave the finished logo pinned in place after the morph while the rest of the page continues scrolling."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Perfect For:","marks":[{"type":"bold"}]},{"type":"text","text":" • SaaS and product landing pages • Brand-led hero transitions • Logo-to-navigation moments • Editorial and portfolio sites • Scroll-driven storytelling"}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Key Features:","marks":[{"type":"bold"}]},{"type":"text","text":" • Self-contained scroll scene • Text or custom image/logo • Any-position-to-any-position movement • Independent start and final scale • Responsive mobile scaling • Adjustable scroll length and motion range • Linear, Power2 Out, and Power3 InOut easing • Keep Final pinned state • Canvas animation preview • Accessible image alt text • No external packages"}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"How It Works:","marks":[{"type":"bold"}]},{"type":"text","text":" Drop the component into normal page flow, choose Text or Image, set the start and final positions, then adjust Scroll Scene Length and Motion Start/End. The component handles the sticky scroll behavior internally."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Questions?","marks":[{"type":"bold"}]},{"type":"text","text":" Reach out at "},{"type":"text","text":"hasanwali6890@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hasanwali6890@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Refund Policy","marks":[{"type":"bold"}]},{"type":"text","text":" All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer's remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase."}]}]},"introduction":"https://framer.link/hxwCdwo","slug":"logo-on-scroll-v2","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a07f5f-a1e6-7402-87d4-930f260287fb.png","metadata":{"tint":{"h":60,"s":53,"l":39},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-08T04:56:15.356Z","updatedAt":"2026-09-08T05:18:43.823Z","publishedAt":"2026-09-08T04:56:15.354Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://persistent-baguette-942546.framer.app","price":"9","paymentUrl":"https://hw-6890.lemonsqueezy.com/checkout/buy/4e73f03a-3557-4dba-b1cd-e114b64fcd59","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"gmBWaCxalYoLE84LIcBO","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-08T04:56:15.926Z","updatedAt":"2026-09-08T04:56:15.926Z"},{"id":"01a07b5b-90ce-74b0-9cb1-dade78b86f79","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"AfWuvtoeLj4QSBjsn51V","resolved":true,"title":"Logo on Scroll v1","body":"$70","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"About this Component","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Logo on scroll creates a responsive scroll-driven transition where a large centered logo shrinks into a fully functional navigation bar while the surrounding panel expands to fill the viewport."}]},{"type":"paragraph","content":[{"type":"text","text":"Use a text logo or upload your own image, choose between solid, image, or video backgrounds, and fine-tune the animation for desktop and mobile independently."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Perfect For","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Creative portfolios, agencies, studios, editorial sites, landing pages, brand showcases, and websites that need a strong transition from hero content into navigation."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Key Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll-driven panel expansion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Logo-to-navbar transition"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image or text logo support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Solid, image, and video backgrounds"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Up to 4 customizable navigation links"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional persistent navbar"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Independent mobile animation toggle"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mobile link Reveal / Always / Hide modes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable mobile logo positioning"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive desktop and mobile layouts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom typography and spacing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll smoothing and animation distance controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Canvas preview control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static renderer support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Offscreen animation pausing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Organized property controls"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"How It Works","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Place the component inside a sticky viewport-height frame within a taller scrolling section. As the page scrolls, the panel expands while the logo scales down and docks into the navbar. Choose "},{"type":"text","text":"Scroll Away","marks":[{"type":"bold"}]},{"type":"text","text":" to keep the navigation tied to the section, or "},{"type":"text","text":"Stay Fixed","marks":[{"type":"bold"}]},{"type":"text","text":" to keep the completed navbar visible throughout the rest of the page."}]},{"type":"paragraph","content":[{"type":"text","text":"Mobile behavior can use the same reveal animation or skip directly to the completed navigation layout."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Questions?","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Reach out at "},{"type":"text","text":"hasanwali6890@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hasanwali6890@gmail.com","target":"_blank"}},{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Refund Policy","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that cannot be reasonably resolved. Refunds are not provided for buyer's remorse, aesthetic preference, or post-purchase modification requests. Report confirmed technical failures with supporting evidence within "},{"type":"text","text":"14 days of purchase","marks":[{"type":"bold"}]},{"type":"text","text":"."}]}]},"introduction":"Scroll reveal into a live navbar","slug":"logo-on-scroll-v1","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a07b5b-7d70-74fe-80ec-7bd46561fb79.png","metadata":{"tint":{"h":210,"s":29,"l":22},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-07T10:13:13.036Z","updatedAt":"2026-09-07T10:28:11.394Z","publishedAt":"2026-09-07T10:13:13.033Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://delicate-type-907347.framer.app","price":"9","paymentUrl":"https://hw-6890.lemonsqueezy.com/checkout/buy/6997af7d-1e90-425e-99e6-f7315aea0273","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"0Ib3Gx1k2YwtmlQczJox","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-07T10:13:13.550Z","updatedAt":"2026-09-07T10:13:13.550Z"},{"id":"01a07b52-2f1b-740f-b1e2-5934f149591b","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"8jWolhz2PUhYzqONvjgb","resolved":true,"title":"Sticky Mask Gallery","body":"$71","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"About this Component","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Sticky Mask Gallery is a scroll-driven image gallery built for cinematic sticky sections. Images stay visually locked in place while rounded containers move across them, creating a clean masked reveal with a persistent gap between each transition."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Perfect For","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Product pages, landing pages, portfolios, editorial layouts, feature showcases, and immersive storytelling sections."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Key Features","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Stationary-image masked reveal • Smooth multi-image scroll progression • Persistent gap between outgoing and incoming containers • Fluid or fixed responsive geometry • Adjustable radius, gap, side inset, and vertical inset • Image fit and focal-position controls • Custom gap and image background colors • Adjustable scroll start, end, and sticky offset • Supports up to 12 images • Static-renderer fallback for Marketplace previews • Offscreen animation pausing for better performance • Fully scoped behavior with no page-wide scroll manipulation"}]},{"type":"paragraph","content":[{"type":"text","text":"How It Works","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Place the component inside a sticky frame, then place that sticky frame inside a taller scrolling section. A parent height around 2000–3000px works well as a starting point. The outer section supplies the scroll distance while the component handles the image transitions automatically."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Questions?","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Reach out at "},{"type":"text","text":"hasanwali6890@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hasanwali6890@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Refund Policy","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer's remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase."}]}]},"introduction":"Scroll revealed stationary images","slug":"sticky-mask-gallery","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a07b52-1b51-726e-894c-7bd807ced970.png","metadata":{"tint":{"h":8,"s":73,"l":17},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-07T10:02:58.080Z","updatedAt":"2026-09-07T10:02:58.080Z","publishedAt":"2026-09-07T10:02:58.077Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://olive-cylinder-762495.framer.app","price":"10","paymentUrl":"https://hw-6890.lemonsqueezy.com/checkout/buy/ff392fea-86eb-44bd-a022-65d17ba0f92f","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"Ud5nqzzzIspmdM5YfgpJ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-07T10:02:58.715Z","updatedAt":"2026-09-07T10:02:58.715Z"},{"id":"01a0709f-eaa2-7413-9a77-a9edac2b7afd","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"aca8qtMitFImZkpDe6bo","resolved":true,"title":"ASCII reveal FX","body":"$72","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"About this Component","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Haytham ASCII Reveal transforms an image stack with a scroll-driven ASCII dissolve. Instead of a simple wipe or crossfade, each transition is carried by a customizable grid of characters that scatters across the reveal edge for a tactile, digital look."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Perfect For:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Creative portfolios, editorial layouts, launch pages, art direction, product storytelling, and experimental landing pages."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Key Features:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Upload up to 12 responsive images • Two scroll modes: Internal or Framer Scroll Sections • In Sections mode, each Scroll Section controls one image transition • Transition begins when the section top reaches the bottom of the viewport • Section height determines the duration of that transition • Adjustable cell size, colors, glyph set, font, spread, scatter, core width, and sparsity • Cover/Contain image fitting with X/Y focal-point controls • Responsive, static-renderer safe, and optimized to pause off-screen • No external animation library required"}]},{"type":"paragraph","content":[{"type":"text","text":"How It Works:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Use Internal mode for an automatically detected scroll track, or switch to Sections and enter your Framer Scroll Section IDs in order. Image 1→2 uses ID 1, Image 2→3 uses ID 2, and so on. For N images, use N−1 section IDs."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Questions?","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Reach out at "},{"type":"text","text":"hasanwali6890@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hasanwali6890@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Refund Policy","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer's remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase."}]}]},"introduction":"ASCII image transitions on scroll","slug":"ascii-reveal-fx","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a0709f-8b65-71fa-9ad2-1db2455724dc.png","metadata":{"tint":{"h":0,"s":0,"l":16},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-05T08:12:03.117Z","updatedAt":"2026-09-05T08:12:03.117Z","publishedAt":"2026-09-05T08:12:03.114Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://gregarious-star-667346.framer.app","price":"12","paymentUrl":"https://hw-6890.lemonsqueezy.com/checkout/buy/4b8cbbed-4416-456c-ba84-aef919025869","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"LNBy6TAYBJfYdrMhOK1l","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-05T08:12:03.618Z","updatedAt":"2026-09-05T08:12:03.618Z"},{"id":"01a065fe-8780-7149-9346-d1f16f302a6f","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"lc7b6ye024jenJP4GY3M","resolved":true,"title":"Ribbon Gallery","body":"$73","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"About this Component","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Ribbon gallery is an immersive WebGL portfolio carousel for Framer. Projects travel through an infinite ribbon with velocity bending, inertia, pointer parallax, smooth entry fades, hover ripples, media reveals, and a cinematic pill-to-gallery preloader."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Perfect For:","marks":[{"type":"bold"}]},{"type":"text","text":" Creative portfolios, agencies, case studies, photography, motion work, product showcases, and experimental landing pages."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Key Features:","marks":[{"type":"bold"}]},{"type":"text","text":" • 1 → 3 pill preloader that morphs into the first three projects • Infinite ribbon with drag, wheel/trackpad control, inertia, bend, and parallax • Image or video thumbnails for every project • Optional image/video hover reveal with shared ripple controls • Reveal size, softness, timing, refraction, glow, tilt, and ripple speed controls • Smooth neighboring and returning card fade-ins • Editable project names, links, labels, sizing, spacing, radius, and start position • Optional floor grid • Optional Scroll Up, Scroll Down, and Card Click audio with volume controls • Videos pause offscreen; reveal videos play only when needed • Render loop sleeps while idle and pauses offscreen or when the tab is hidden • Static Framer Canvas/export fallback"}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"How It Works:","marks":[{"type":"bold"}]},{"type":"text","text":" Add your projects, choose image or video media, then customize the layout and motion. On load, one pill splits into three and morphs into Projects 1–3. Neighboring cards fade in afterward. Drag or scroll to explore, hover any card for the ripple/reveal, and assign links as needed. Sound is optional and off by default."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Questions?","marks":[{"type":"bold"}]},{"type":"text","text":" Reach out at "},{"type":"text","text":"hasanwali6890@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hasanwali6890@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Refund Policy:","marks":[{"type":"bold"}]},{"type":"text","text":" All sales are final for this non-tangible digital product. Refunds are available only for a confirmed critical technical failure that prevents the core function and cannot be reasonably resolved. No refunds are provided for buyer’s remorse, aesthetic preference, or post-purchase modification requests. Confirmed failures must be reported with evidence within 14 days of purchase."}]}]},"introduction":"WebGL portfolio ribbon carousel","slug":"ribbon-gallery","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a065fe-6f9e-7529-bbf5-ce6b2a419633.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-03T06:39:34.280Z","updatedAt":"2026-09-03T07:00:26.353Z","publishedAt":"2026-09-03T06:39:34.278Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://special-manatee-176563.framer.app","price":"18","paymentUrl":"https://hw-6890.lemonsqueezy.com/checkout/buy/6d42f8f8-eed5-4feb-aea3-a6bb0a252706","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"LSBbnB1rfgrvL3ON9z4Q","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-03T06:39:34.784Z","updatedAt":"2026-09-03T06:39:34.784Z"},{"id":"01a06081-1473-765b-b719-6941be83b71f","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"MZfnf5qIQJ3HyCcOaotk","resolved":true,"title":"Parallax Grid Scroll","body":"$74","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"About this Component","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Haytham Scroll Grid is a scroll-driven image gallery that transforms a repeating image grid as users move through the page. Choose Vertical for expanding horizontal rows, or Horizontal to convert vertical page scroll into a sticky sideways sequence of vertical image columns. Both directions preserve the same responsive growth effect and can be tuned for desktop and mobile."}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect For","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Creative portfolios • Agency and studio sites • Case-study showcases • Editorial galleries • Product and campaign pages"}]},{"type":"paragraph","content":[{"type":"text","text":"Key Features","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Vertical + horizontal scroll modes • Horizontal travel in either Right → Left or Left → Right • Adjustable horizontal start/end points and scroll length • Responsive desktop/mobile start and end growth values • Custom row/column count and images per group • Shared gap, padding, aspect ratio, crop and corner-radius controls • Optional scroll smoothing • Repeating image pool for fast setup • Static Canvas/export preview • Off-screen animation pausing for better performance • No external packages or page-wide scroll locking"}]},{"type":"paragraph","content":[{"type":"text","text":"Upload your images, choose a direction, then shape the motion through the organized Layout, Growth, H Scroll and Appearance controls."}]},{"type":"paragraph","content":[{"type":"text","text":"Questions? ","marks":[{"type":"bold"}]},{"type":"text","text":"Reach out to me at "},{"type":"text","text":"hasanwali6890@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hasanwali6890@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Refund Policy:","marks":[{"type":"bold"}]},{"type":"text","text":" All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer's remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase."}]}]},"introduction":"Dual-axis expanding image gallery","slug":"parallax-grid-scroll","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a06080-9589-75a3-935e-e6fcf031c702.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-02T05:04:26.754Z","updatedAt":"2026-09-02T05:04:26.754Z","publishedAt":"2026-09-02T05:04:26.742Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://vivacious-growth-537515.framer.app","price":"13","paymentUrl":"https://hw-6890.lemonsqueezy.com/checkout/buy/bd582110-6195-4b6b-a54f-b1590491f83c","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"IZncPbdWXrnpJZngtYg8","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-02T05:04:27.251Z","updatedAt":"2026-09-02T05:04:27.251Z"},{"id":"01a05b96-0d15-730a-813f-d6224a4b4ac7","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"946KvxbwbncIw1jJTbNY","resolved":true,"title":"Scroll Search Morph","body":"$75","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"About this Component","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Haytham Search Flow is a scroll-driven interaction that transforms scattered feature labels into a focused search experience. As the page moves, feature pills converge toward the center, the opening message transitions away, and the scene resolves into a final result with a clickable search-style action."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Perfect For","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Creative portfolios, product sites, AI/SaaS experiences, editorial layouts, landing pages, feature presentations, and storytelling sections."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Key Features","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Scroll-driven multi-stage transformation • Up to 12 editable feature labels • Individual X/Y offsets for every feature • Seven pre-positioned scattered defaults • Editable opening, result, body, and search copy • Optional clickable search action • Custom decorative mesh image support • Built-in gradient mesh fallback with editable colors and blur • Separate desktop/mobile mesh scaling • Display, body, and label typography controls • Background, text, surface, and stroke styling • Responsive breakpoint, spacing, widths, and mobile type controls • Adjustable scroll length • Accessible heading and scene-label controls"}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"How It Works","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Drop the component into your page and scroll. It creates its own pinned scroll sequence, so no extra sticky wrapper is required. Edit the labels, reposition each one with X/Y offsets, customize the copy and visuals, and add a destination to the search action if needed."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Questions?","marks":[{"type":"bold"}]},{"type":"text","text":" Reach out at "},{"type":"text","text":"hasanwali6890@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hasanwali6890@gmail.com","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":"Refund Policy","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer's remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase."}]}]},"introduction":"Scroll interaction for SaaS sites.","slug":"scroll-search-morph","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a05b95-f9e9-77a7-9770-f89557377ed3.png","metadata":{"tint":{"h":0,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-01T06:09:15.061Z","updatedAt":"2026-09-01T06:09:15.061Z","publishedAt":"2026-09-01T06:09:15.058Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://trustworthy-tool-263620.framer.app","price":"12","paymentUrl":"https://hw-6890.lemonsqueezy.com/checkout/buy/4055b369-b13d-4c4e-b294-9981dd915201","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"b2HAWdfizGk2iPdyRYwq","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-01T06:09:15.541Z","updatedAt":"2026-09-01T06:09:15.541Z"}],"pagination":{"next":"MDFhMDViOTYtMGQxNS03MzBhLTgxM2YtZDYyMjRhNGI0YWM3","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L76"}]