SpinTone is a modern, vinyl-inspired audio player component that brings motion, personality, and sound together in a single interactive UI. Designed specifically for Framer, it features a rotating disc animation, realistic needle movement, and robust audio handling that works safely across Canvas, Preview, and published sites.
Perfect for portfolios, creative studios, music projects, landing pages, and experimental layouts that need more than a basic play button.
Rotating Disc AnimationSmooth, continuous vinyl rotation synced with playback state.
Dynamic Needle InteractionRealistic needle movement that responds to play and pause.
Playlist SupportAdd multiple audio tracks with titles and optional cover images.
Autoplay & Loop OptionsConfigurable autoplay and looping with browser-safe user-gesture handling.
Framer-Safe Audio LogicBuilt to respect Framer Canvas, Preview, and Thumbnail rendering—no unwanted audio playback.
Accessible by DefaultKeyboard navigation and screen-reader friendly labels included.
SpinTone is highly flexible through Framer Property Controls:
Background color
Disc color
Needle accent color
Autoplay toggle
Loop toggle
Sequential or random play mode
Playlist management (audio + cover images)
No code required.
Creative portfolios
Music artists & producers
Studio or agency websites
Interactive landing pages
Experimental UI / motion-driven layouts
Built with Framer Motion
Canvas-safe and Marketplace-ready
Handles browser autoplay restrictions correctly
Lightweight and performance-optimized
No external dependencies
Most audio players feel generic.SpinTone turns sound into an experience — visual, tactile, and expressive — while staying fully compliant with Framer’s runtime rules.
If you want your site to feel alive, SpinTone is the missing piece.
Sameer
