Interactive 3D Product Scroller Development
Budget: $250 – $750 AUD
Project Brief: Sprinkle Me 3D Product Experience (Framer Build)
Overview
Sprinkle Me is seeking a Framer developer to build an interactive 3D product scroller as part of the main website. The experience should showcase each earring design as a floating, depth-based element that responds to gyroscope or mouse movement, with a smooth, spring-like scrolling transition between products.
Core Requirements
Built in Framer, integrated under the main Sprinkle Me domain.
Vertical scroll layout: one product per screen, with a floating card-style presentation.
Scroll motion: natural inertia with magnetic “spring” pull into place (similar to iOS home-screen bounce).
Gyroscope tilt on mobile, mouse tilt on desktop.
Requires user permission on iOS; if denied, redirect to a static message page instructing the user to enable motion sensors.
Horizontal swipe for viewing color variants (1–6 per product).
Preloading: all variants for the active product, plus the next two products (no variants).
Lazy initialization to optimize performance (only the visible product is active).
Consistent background across all products.
Design assets (Figma file and brand colors) will be provided.
Optional Enhancements
Subtle responsive shadow that adjusts with tilt.
Light sparkle or depth effect consistent with Sprinkle Me branding.
Content Management
The solution should support easy addition of new products. Framer’s CMS or another lightweight option is preferred over static hardcoding.
Deliverables
Complete Framer project file with integrated motion permissions flow and redirect page.
Documentation on adding new products and variants.
Responsive, mobile-first implementation tested on modern iOS and Android devices.
To Apply
Include relevant Framer projects demonstrating animation, scroll physics, or 3D/gyroscope motion effects.
Overview
Sprinkle Me is seeking a Framer developer to build an interactive 3D product scroller as part of the main website. The experience should showcase each earring design as a floating, depth-based element that responds to gyroscope or mouse movement, with a smooth, spring-like scrolling transition between products.
Core Requirements
Built in Framer, integrated under the main Sprinkle Me domain.
Vertical scroll layout: one product per screen, with a floating card-style presentation.
Scroll motion: natural inertia with magnetic “spring” pull into place (similar to iOS home-screen bounce).
Gyroscope tilt on mobile, mouse tilt on desktop.
Requires user permission on iOS; if denied, redirect to a static message page instructing the user to enable motion sensors.
Horizontal swipe for viewing color variants (1–6 per product).
Preloading: all variants for the active product, plus the next two products (no variants).
Lazy initialization to optimize performance (only the visible product is active).
Consistent background across all products.
Design assets (Figma file and brand colors) will be provided.
Optional Enhancements
Subtle responsive shadow that adjusts with tilt.
Light sparkle or depth effect consistent with Sprinkle Me branding.
Content Management
The solution should support easy addition of new products. Framer’s CMS or another lightweight option is preferred over static hardcoding.
Deliverables
Complete Framer project file with integrated motion permissions flow and redirect page.
Documentation on adding new products and variants.
Responsive, mobile-first implementation tested on modern iOS and Android devices.
To Apply
Include relevant Framer projects demonstrating animation, scroll physics, or 3D/gyroscope motion effects.