Top 1% Spline Expert.
Freelance 3D Artist | Helping consumer-focused brands.
- $5k+
- Earned
- 7x
- Hired
- 5.0
- Rating
- 41
- Followers
Freelance 3D Artist | Helping consumer-focused brands.
Premium Framer Websites and Motion Design for Growing Brands
Premium Framer Websites and Motion Design for Growing Brands
Crafting experiences at intersection of design & technology
Crafting experiences at intersection of design & technology
BIM Services-Architecture, Structure & MEP I Scan to BIM
- $•••••
- Earned
- 6x
- Hired
- 5.0
- Rating
- 47
- Followers
BIM Services-Architecture, Structure & MEP I Scan to BIM
Design, Build, AI, Automation
Project Overview
Rechitta is a cinematic, feature-film-directed digital web experience engineered for luxury real estate developers in Dubai. It serves as a unified digital briefing engine connecting property developers with over 40,000 registered brokers across 6 international financial hubs at the exact same instant: 04:11 UTC.
The landing experience advances through an interconnected five-act sequence: Dawn, the Executive Boardroom, the Broker Terrace, the Synchronised World Chronometer, and the Dusk Horizon Loop.
The Problem and Industry Context
In rapid-growth luxury property capitals like Dubai, developers launch multi-billion-dollar landmark towers. However, information distribution traditionally relies on outdated and manual workflows:
Network Congestion: Over 40,000 registered brokers operating across more than 1,200 independent agencies.
The Scheduling Bottleneck: A standard 30-person developer sales team requires 3 to 6 months of repetitive boardroom pitches, phone campaigns, and slide presentations just to brief the local brokerage network.
Language Degradation: Cross-border buyers and international brokers speaking Mandarin, Russian, Arabic, Hindi, or French rely on third-party translation relays, causing severe loss of technical nuance, misunderstandings around payment plans, and delayed transaction closings.
From an engineering perspective, most scroll-driven video websites attempt to bind scroll offsets directly to the video currentTime property. This introduces decoder starvation, dropped frames, scroll judder, and severe performance issues on mobile devices. Rechitta required an ultra-luxury, fluid 60fps interactive narrative without compromising performance.
Key Engineering Architecture and Implementation
1. Discrete Beat Engine and Hardware GPU Decoding
To eliminate scroll judder and decoder stalls:
Developed a custom input state machine (director.ts) driven by an Intent Accumulator. User scroll wheel and touch gesture events accumulate until crossing a defined threshold before committing to a camera move.
Added cooldown guards and idle reset timers to prevent momentum overshoots.
Transitions decode short video sequences at native hardware GPU speeds (1.0x to 3.6x) rather than scrub-seeking raw video elements, delivering a locked 60fps playback experience across both desktop and mobile devices.
2. Mathematical 3D Perspective Homography Warp Engine
To render live, functioning web applications inside smartphones and boardroom monitors within moving cinematic footage:
Built a custom 8-degree-of-freedom perspective homography solver using Gaussian elimination.
Tracked normalised video coordinates across corner vertices (Top-Left, Top-Right, Bottom-Right, Bottom-Left) relative to viewport cover crops.
Dynamically calculated CSS matrix3d transformations in real time, allowing interactive application interfaces and iframes to naturally track moving physical camera angles.
3. Luminous 3D Orb Navigator and WebGL Globe
Built a celestial 3D Orb using Three.js and React Three Fibre that guides the visitor through the narrative.
Anchored orb trajectories directly to video clip timestamps rather than scroll percentages, ensuring spatial synchronisation regardless of responsive layout changes.
Implemented an interactive 3D WebGL Earth featuring custom atmospheric GLSL Fresnel glow shaders, day/night texture blending, and dynamic marker coordinates for global financial hubs.
4. Synchronised World Chronometer (04:11 UTC) and In-Memory Video Streamer
Realised the core philosophy of "The Same Moment" by mathematically calculating simultaneous local times across 6 world capitals (London, Paris, Moscow, Riyadh, Mumbai, Shanghai) from a single 04:11 UTC baseline.
Engineered an in-memory RAM Blob pre-warming engine (CityBackdrop.tsx) that precaches high-bitrate drone cinematography loops to ensure instantaneous switching between hubs with native localised typography (supporting both LTR and RTL scripts).
5. Automated Multi-Tier Video Encoding Pipeline
Built an automated multi-tier encoding pipeline using FFmpeg to support broad device compatibility:
AV1 (10-bit) for modern Chromium browsers.
HEVC / Apple VideoToolbox (10-bit) for hardware-accelerated Safari and iOS WebKit rendering.
H.264 (8-bit) as a universal baseline fallback.
Discretised 60fps WebP keyframes for zero-latency mobile first-frame underlays.
6. Mobile Polish and Continuous Infinity Loop
Eliminated video end-of-clip flickering and playback hangs on iOS and Android devices through preloaded dual-video decoders and state cleanups.
Designed an architectural infinity loop where the Act V dusk horizon smoothly cross-dissolves backwards into the Act I dawn sky for an uninterrupted, continuous presentation cycle.
Design System and Visual Standards
Palette: Deep Obsidian (#0A0A09), Surface Obsidian (#141413), Desert Gold (#C5A572), Electric Brand Blue (#3D6FF5), and Warm Off-White (#FAFAF9).
Typography: Architectural serif headings paired with clean Swiss grotesque body typography and monospace UTC telemetry clocks.
Micro-Interactions: Magnetic custom cursors, glassmorphic HUD status overlays, and fluid layout progress rails.
Key Results and Deliverables
Consistent 60fps Playback: Fully resolved video judder and decoder starvation across low-power mobile devices and high-end 4K workstations.
Cross-Platform Parity: Native hardware video acceleration and responsive touch gestures across iOS, Android, macOS, and Windows.
Tested Reliability: Automated unit test coverage powered by Vitest verifying core algorithms including homography matrix calculations, input accumulators, and timeline synchronisation.
Luxury Standard: Delivered a high-performance web experience matching the calibre and architectural scale of Dubai's premier property developers.
Technology Stack
Frontend: Next.js 16 (App Router), React 19, TypeScript
Styling: Tailwind CSS v4, Vanilla CSS Modules
3D and Animation: Three.js, React Three Fibre, Drei, GSAP, Lenis Smooth Scroll
Shaders and Math: Custom GLSL Shaders, 8-DOF Homography Solver (matrix3d)
Media Pipeline: FFmpeg (AV1, HEVC, H.264, WebP)
Quality Assurance: Vitest, ESLint
3
0
184
Original Framer Websites
3D Immersive Landing Pages & Hero Sections
3D Immersive Landing Pages & Hero Sections
Been experimenting with Claude Fable 5 beyond the usual AI coding use cases.
Instead of building another app, I wanted to improve how I build interactive 3D websites.
So I built a live 3D Tuner that lets me adjust lighting, camera, bloom and other scene settings in real time while the site is running, without constantly editing code and refreshing the page.
To test the workflow, I built this Dior Sauvage hero section using my own 3D model.
2
2
357
A recent experiment exploring what's possible with Claude Code and 3D interactive web experiences.
Started with a rough concept and gradually evolved through dozens of small iterations, adjusting motion, interactions, perspective, and all the tiny details that make an experience feel cohesive.
The most exciting part wasn't generating the code. It was being able to move from idea to prototype so quickly and spend more time refining the creative side of the process.
Really happy with how this one turned out. If you'd like the Claude Code workflow I used to build this, hit me up.
1
2
300
An aurora-emitting orb, suspended in space, breathing and recalculating with every cursor movement.
Another real-time shader experiment built in Unicorn Studio.
Lately, I’ve been making reactive and immersive systems over static visuals.
Just motion, code, and curiosity, all possible with the help of Unicorn Studio.
5
4
521