Omni-Kinetic Gallery is the definitive media engine for high-end Framer projects. It bridges the gap between traditional horizontal tickers and immersive 3D environments by offering a Dual-Mode Architecture. With a single click, you can switch your entire media library between a sleek Infinite Ticker and a deep 3D Infinite Cascade.

Engineered with custom GLSL Vertex Shaders, this component introduces "Kinetic Velocity Warp"—a feature that physically skews and stretches your media based on its movement speed. The faster you scroll, the more the media organically warps, creating a sense of momentum that is impossible to achieve with standard CSS.

✨ Key Highlights

• Dual-Layout Versatility: Switch instantly between an Infinite 3D Cascade (staggered depth stack) and a professional Infinite Ticker (horizontal ribbon). One component, two distinct vibes.

• Kinetic Velocity Warp: Our custom shader tracks the velocity of each item. As the gallery moves, the media undergoes a "Velocity Skew," stretching and tilting to simulate physical inertia and speed.

• Convex Lens Bulge: Features a sophisticated interaction layer where hovered items undergo a "Convex Lens" distortion. The media bulges toward the user, paired with an RGB Chromatic Aberration shift for a high-end optical finish.

• Scroll-Sync Physics: The gallery isn't just auto-scrolling; it’s tethered to the user's scroll. Page-scroll velocity is injected directly into the infinite loop, allowing the user to "spin" the gallery by scrolling.

• Cinematic Interaction Suite: Includes "Dim Neighbors" logic (automatically darkening non-active items), Physics-based Hover Lift, and Spring-Mass-Damping for buttery-smooth arrivals.

• Mixed Media Support: Seamlessly handles both high-resolution Images and Video (MP4/MOV/WEBM) with a custom "Fade-In" engine that eliminates black flashes during texture loading.

⚙️ Complete Design Control

• Content & DNA: Add as many images or videos as you like. The engine automatically duplicates and tiles them to ensure a perfect, gapless infinite loop regardless of screen size.

• Layout Geometry: Full control over item width, aspect ratio, and corner radius. In Cascade mode, fine-tune the X, Y, and Z (Depth) stagger to create your perfect 3D environment.

• Motion & Speed: Adjust the "Auto Speed" for continuous flow and the "Scroll Sync" multiplier to define how much page movement affects the gallery.

• Shader Precision: Dial in the "Lens Bulge" intensity, "Velocity Skew" multiplier, and "RGB Shift" strength to match your brand's aesthetic—from subtle and clean to bold and experimental.