Freelance Framer Developers in MödlingFreelance Framer Developers in Mödling
Award winning Webdesigner who loves Framer
$5k+
Earned
5x
Hired
5.0
Rating
34
Followers
Award winning Webdesigner who loves Framer
Product and Web partner for fast growing startups⚡
5.0
Rating
9
Followers
Product and Web partner for fast growing startups⚡
Always pushing the boundaries of Design and Development.
1x
Hired
1
Followers
Always pushing the boundaries of Design and Development.
Cover image for PRISM — Pointer Reactive Image
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.
1
87
Cover image for SIG — Spiral Image Gallery
Overview
SIG
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.
1
87
Cover image for VIDS — Vertical Infinite Distortion
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.
1
92
Cover image for Dylan Donaldson — Portfolio Website
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.
1
99
Framer websites that turn visitors into customers
1x
Hired
1
Followers
Framer websites that turn visitors into customers