pro
Antariksh "Ryan" Borgohain
Always pushing the boundaries of Design and Development.
Ready for work
Antariksh "Ryan" is ready for their next project!
RING — Rotational Image Navigation Gallery
Overview
RING is a CSS 3D Framer component that arranges images into a continuously rotating ring viewed in perspective. Built over two days, it was inspired by a concept shared by @thebuggeddev and built as a statement about the underrated role of visual spectacle in web design. The kind of component that stops people mid-scroll and keeps them on the page longer than anything a conversion copywriter could write.
The Challenge
The challenge was building a smooth, performant 3D ring that could handle up to 96 cards, run a polished intro animation, and stay lightweight enough to live inside a Framer landing page without competing with the rest of the layout. Every card needed to sit correctly on the ring geometry, face outward, and move at a consistent speed regardless of frame rate.
The Approach
Unlike the other components in this suite, RING uses no WebGL or Three.js. The entire 3D environment is built on CSS perspective and transform-style: preserve-3d. Each card is positioned by rotating it around the Y axis by its index angle, then translating it outward along Z by the ring radius, then rotating it 90 degrees to face outward. The math is simple but the result reads as genuinely spatial.
Images are provided as a source set of up to 12 items and repeated programmatically to fill the full card count. This keeps the property controls clean while allowing rings of 40, 60, or 96 cards without requiring the user to upload dozens of images.
The Build
Rotation runs through a requestAnimationFrame loop that uses delta time for frame-rate independent movement, so the ring spins at the same perceived speed on 60Hz and 120Hz displays.
The intro animation runs in two overlapping phases controlled by React state. In the first phase, cards fade in with a staggered delay applied in reverse index order, so the ring appears to assemble itself outward from a single point. In the second phase, which starts at 30% into the fade sequence, the individual card tilt and the overall ring tilt animate to their resting positions simultaneously using a spring-like cubic-bezier curve. The overlap timing creates a single fluid motion rather than two separate steps.
Framer's useIsStaticRenderer hook bypasses all animation logic during static export, so thumbnails and previews render instantly without getting caught in transition states.
On Visual Candy
RING sits in a category of components that are sometimes dismissed as decorative. The counter-argument is simple: time on page is one of the most reliable signals for content relevance, and nothing increases time on page like something that is genuinely pleasurable to look at. A rotating image gallery in a hero section does not replace good copy or a clear offer. But it earns the attention that makes those things possible. Used with intention, visual spectacle is a retention tool, not a distraction.
The Result
RING is currently pending Framer marketplace approval. The build reinforced that CSS 3D transforms, used carefully, can produce spatial experiences that feel comparable to WebGL at a fraction of the complexity and bundle cost.
0
5
CAVE — Curved Adaptive Visual Environment
Overview
CAVE is a Three.js-powered Framer component that arranges images or videos into a curved 3D grid that reacts to cursor movement in real time. Built over two days starting April 1, it was designed as a high-impact hero or showreel component for sites that need something more spatial and immersive than a standard media grid.
The Challenge
The challenge was building a component that could handle both video and image media inside a curved 3D environment while staying configurable enough to work across different layouts and aesthetics. Every tile needed to sit correctly on the curved surface, face the right direction, and respond to cursor input in a way that felt physically coherent rather than just reactive noise.
The Approach
The curve is calculated mathematically per tile rather than using a pre-built Three.js geometry. Each tile's x and y position drives its z depth through a parabolic function, and its rotation is derived from the slope of that curve at its position. A separate vertical curvature parameter applies an additional curve along the y axis, allowing the grid to bow in two directions independently.
Each tile carries randomised parallax and oscillation data assigned at initialisation. When the cursor moves, tiles shift by different amounts based on their individual parallax factor and a random directional offset, creating a layered depth effect rather than a uniform slide. An idle oscillation tied to a per-tile phase offset keeps the grid breathing even when the cursor is still.
The camera uses a smoothed lookAt target rather than moving its position, so the perspective shift feels like the viewer turning their head rather than physically moving through the scene.
The Build
Video tiles use Three.js VideoTexture fed from dynamically created video elements, with autoplay, mute, and loop handled at initialisation. Images use the standard TextureLoader. Both paths share the same tile geometry and material system. Media sources can be uploaded directly or provided as external URLs through the property controls.
The overlay header element responds to mouse movement through CSS 3D transforms applied in JavaScript, giving it a tilt effect that stays in sync with the 3D scene behind it. Cleanup on unmount pauses and unloads all video elements, disposes geometries and materials, and removes the renderer DOM node to prevent memory leaks.
The Result
CAVE is currently in active development. The component is desktop-focused by design, built for use cases where a high-fidelity, immersive media experience takes priority over mobile compatibility.
0
12
RIFT — Reactive Interactive Flow Text
Overview
RIFT is a cursor-reactive text component for Framer that pushes words away from the pointer in real time. Built over two days, it was inspired by the moment chenglou's pretext experiment took over design and developer feeds. RIFT is not a port of pretext and takes a different technical approach entirely, but it scratches the same itch: making text feel physical and alive in response to the cursor.
The Challenge
The challenge was making word-level repulsion feel natural inside Framer without resorting to a physics engine or a canvas renderer. The component needed to be lightweight, fully configurable from the properties panel, and expressive enough to cover a wide range of motion styles, all while staying within React's rendering model.
The Approach
Rather than simulating physics or using WebGL like PRISM and SIG, RIFT is built entirely on React state and CSS transitions. The text is split into individual word spans, each measured against the container using getBoundingClientRect to find their center positions. When the pointer moves, each word calculates its distance from the cursor and applies a repulsion force as a CSS transform, pushing it outward along the vector from cursor to word center.
The influence falloff uses a power curve rather than a linear drop, giving the repulsion a more organic, weighted feel as words near the edge of the radius settle back into place.
Five cursor shape modes change how the influence radius is calculated geometrically. Circle uses standard Euclidean distance. Horizontal and Vertical use elliptical distance with different axis ratios. Square uses Chebyshev distance, measuring the maximum of the absolute x and y deltas. Diamond uses Manhattan distance, summing the absolute deltas. Each shape produces a noticeably different interaction feel without changing any other part of the system.
The Build
Color blending between the default and active states is handled through a custom color parser and mixer built from scratch, supporting hex in three, four, six, and eight character formats as well as rgb and rgba. Colors interpolate per word based on influence amount, so words closest to the cursor shift toward the active color smoothly.
Motion presets expose five timing configurations: Soft, Snappy, Floaty, Elastic, and Custom. Each preset defines separate active and return durations along with a CSS timing function, including cubic-bezier curves for the Floaty and Elastic presets. Using separate in and out durations creates asymmetric movement that feels more considered than a simple ease.
Because the animation runs through CSS transitions rather than a requestAnimationFrame loop, the browser handles compositing directly, keeping performance consistent even with large blocks of text.
The Result
RIFT is currently pending Framer marketplace approval. The component demonstrated that cursor-reactive text interactions do not require a physics engine or canvas renderer to feel satisfying, and established a clean pattern for word-level DOM interaction inside Framer's component system.
0
18
PRISM — Pointer Reactive Image Shader Module
Overview
PRISM is a WebGL-powered Framer component that applies real-time cursor-reactive shader effects to any image. It ships with four distinct effects: Ripple, Liquid, Chromatic, and Pixel, all driven by a single fragment shader and fully configurable from the Framer properties panel.
The Challenge
The goal was to build a cursor-reactive image shader that felt genuinely alive without the overhead of a full 3D library. Unlike SIG which required Three.js for spatial geometry, PRISM only needed 2D shader work, so the challenge was implementing four visually distinct effects cleanly, keeping the component lightweight, and handling edge cases like static rendering, WebGL unavailability, and aspect ratio correction gracefully.
The Approach
The core architectural decision was implementing all four effects inside a single fragment shader using a mode uniform as a branch selector. Rather than compiling separate shader programs per effect, one program handles everything: one compile, one link, one draw call regardless of which effect is active. Switching effects at runtime is a uniform update, not a program swap.
Each effect is built differently at the shader level. Ripple uses a sine wave with exponential distance damping from the pointer. Liquid uses Fractal Brownian Motion, layering four octaves of value noise into an organic flow field that warps the UV coordinates. Chromatic splits the RGB channels and samples them at offset positions to simulate lens aberration, combined with a lens bulge distortion. Pixel quantises UV coordinates into a grid and softens the tile edges based on pointer influence.
Aspect ratio is handled inside the shader through a custom coverUv function that replicates CSS object-fit: cover mathematically, ensuring the image fills the frame correctly regardless of component dimensions.
The Build
Rather than Three.js, PRISM uses raw WebGL1 directly via the canvas context. Pointer position and hover state are smoothed with a lerp in the JavaScript render loop before being passed to the shader as uniforms, keeping the GLSL clean and the animation feel controllable. The component uses Framer's useIsStaticRenderer hook to render a plain img tag during static rendering, and falls back to the same img if WebGL is unavailable, so the component never breaks regardless of environment.
Cleanup on unmount deletes the texture, buffer, program, and both shaders explicitly, preventing GPU memory leaks.
The Result
PRISM is currently pending Framer marketplace approval. The build established a lightweight pattern for WebGL shader components in Framer that sits alongside Three.js-based components where full 3D is not needed, giving the component suite a broader range of tools to work with.
0
23
SIG — Spiral Image Gallery
Overview
SIG is another Three.js-powered Framer component that arranges images into a rotating 3D spiral with real-time scroll and cursor reactivity. Built in a single day on March 28, the component was designed to be lightweight and self-contained, deliberately skipping CMS integration to keep the bundle lean and performant.
The Challenge
The goal was to build a 3D image gallery that felt genuinely spatial, not a CSS illusion. Each tile needed to follow a real helix path, curve with the spiral, respond to scroll velocity, and react to cursor position, all inside Framer's rendering environment without breaking the component lifecycle or leaking memory.
The Approach
Rather than relying on Three.js primitives, each tile in SIG is a custom curved quad built from scratch using BufferGeometry. Tile positions are calculated mathematically along a helix, with radius interpolated between a start and end value to produce the three shape presets: Cylinder (uniform radius), Cone (narrow to wide), and Tornado (wide to narrow).
The decision to skip CMS was intentional. Pulling image data through Framer's collection list adds DOM overhead. Instead, SIG accepts a plain image array directly, keeping the component lightweight and reducing the surface area for rendering issues.
The Build
Scroll reactivity is handled through a velocity system that reads raw scroll delta, divides by frame delta time to get true velocity, and smooths it using a configurable lerp. That smoothed velocity is then split into two independent outputs: rotational spin added to the spiral's y-axis rotation, and vertical travel applied to the spiral's world position. This separation allows scroll to feel physically layered rather than just fast or slow.
Cursor parallax is calculated from pointer position relative to the component bounds, smoothed independently, and applied as an offset to the spiral's x and y position. The result is a subtle depth shift that responds to where the viewer is looking.
Performance was handled through three observers: an IntersectionObserver pauses rendering when the component is off-screen, a ResizeObserver keeps the canvas correctly sized, and the Page Visibility API pauses the animation loop when the tab is hidden. Textures, geometries, and materials are all disposed on unmount to prevent memory leaks.
Three motion presets (Calm, Balanced, Reactive) expose velocity smoothing, spin multiplier, and travel multiplier as a single friendly toggle. Advanced controls unlock the raw values for designers who want full control.
The Result
SIG is currently pending Framer marketplace approval. The component established a reusable pattern for scroll velocity systems and custom spiral geometry that directly informed later components in the suite. End-user friendly and highly customizable.
0
32
VIDS — Vertical Infinite Distortion Slider
Overview
VIDS is a Framer component built as the first piece of an upcoming Framer template. Developed over two days starting March 26, it combines CMS-driven content management with a Three.js-powered distortion effect, all packaged as a single, configurable component ready to drop into any Framer project.
The Challenge
The goal was to build a vertically scrolling image slider with real distortion, not a CSS trick, but genuine shader-based warping that reacts to scroll direction and speed. The challenge was doing this inside Framer without breaking the build environment, while keeping the component clean enough for other designers to actually use.
The Approach
The core technical decision was integrating Three.js directly into a Framer code component. Getting WebGL to coexist cleanly inside Framer's rendering environment required careful handling of the canvas lifecycle, resize events, and cleanup, things that break silently if not managed properly. The distortion effect was built to read scroll velocity and translate positive and negative movement into real-time shader deformation on the y-axis.
On the content side, the component was wired to Framer's CMS so that images and content pull directly from a collection list. Designers don't touch the code, they connect their data source and the slider builds itself.
The Build
Key controls exposed as props: distortion intensity, wheel speed, drag speed, smoothing, slide gap, aspect ratio, and min/max height. Font styles can either pull from the CMS collection or be set manually. The entire component is configurable from the Framer properties panel with no code required from the end user.
The Result
VIDS became the foundation component for an upcoming Framer template, currently pending marketplace approval. More than the component itself, the build established a working pattern for Three.js integration inside Framer, one that can be reused and refined across future components.
0
36
3M Productions — Brand Identity & Web Design
Overview
3M Productions is a UK-based creative collective bringing together three specialists: a photographer, videographer, and DJ. The project brief was to shape a unified visual identity and web presence that could reflect the collective's combined offering and establish a clearer, more distinctive position within the events space.
The Challenge
The core challenge was communicating the value of three separate creative disciplines working together as one. Without a cohesive brand, the collective risked appearing fragmented, three individual services rather than a unified offering. The identity needed to feel memorable and easy to understand, while still giving each discipline enough room to retain its own relevance and energy.
The Approach
The project treated the brand as a connected system rather than a list of services. By defining a stronger narrative around the meaning behind 3M, memories, moments, and music, the brand could occupy a distinctive space between individual event vendors and full-scale event production, giving it a flexible and differentiated value proposition.
The visual identity was built around a direction that feels contemporary, creative, and versatile enough to support different content types, while maintaining enough structure to create consistency across the website and future brand materials.
The Build
The website was built in Framer and designed to introduce the collective clearly, explain the three-part offering, and guide visitors through the value of the collaboration without confusion. A visually focused presentation combined with straightforward structure helped the brand feel credible, intentional, and ready for client-facing growth.
The Result
The project delivered a cohesive visual and digital foundation that gave 3M Productions a stronger position within the events and creative services space. By unifying photography, videography, and music under a single brand story, the work helped define a more memorable and differentiated offering, positioning the collective as more than the sum of its parts.
0
39
Dylan Donaldson — Portfolio Website (Prototype)
Overview
This project was developed for Dylan Donaldson, a UK-based 3D and VFX artist, as a portfolio website shaped around his visual work and creative identity. It also marked a significant milestone on our end; becoming our first Framer project during the transition away from Webflow into a new way of designing and building for the web.
The Challenge
The brief called for a website that could support Dylan's work without competing with it. The experience needed to feel visually considered and aligned with his creative practice, while remaining simple, structured, and easy to navigate. At the same time, the project had to function as a strong first step into a new platform and workflow, making it both a client collaboration and an internal turning point.
The Approach
The approach centered on creating a clean, intentional environment where the work could remain the focal point. Layout, pacing, and presentation were handled with care so the final experience could feel both expressive and professional without over-designing the frame around the content.
The visual direction was developed to give the portfolio enough character to feel distinct while maintaining enough restraint to let the work speak for itself. The goal was a digital setting that felt cohesive, modern, and appropriate for a high-level creative practice.
The Build
Built entirely in Framer, this project served as a hands-on transition from Webflow — an opportunity to explore a new build process while staying grounded in clarity and usability. What made it especially memorable was the collaborative dynamic throughout. The process felt open and thoughtful, with a strong sense of trust on both sides that made it easier to shape the work with confidence.
The Result
The outcome was a portfolio website that presented Dylan's work through a clear and considered digital experience. Beyond the deliverable itself, the project became a meaningful early collaboration and an important milestone in establishing Framer as the foundation for all future work, both creatively and technically.
0
44