Framer Website Design Projects in ViennaFramer Website Design Projects in Vienna
Projects
People
Cover image for RING — Rotational Image Navigation
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
29
Cover image for CAVE — Curved Adaptive Visual
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
37
Cover image for RIFT — Reactive Interactive Flow
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
43