Rolling Cassette is a nostalgic 3D-style UI component that recreates the look and feel of a classic cassette tape, complete with rotating reels, depth extrusion, and soft shadow grounding. It adds personality and motion to hero sections, music-related layouts, and retro-inspired designs.
The reels animate continuously when auto play is enabled, with adjustable roll speed to control how fast the tape spins. You can fully customize the cassette body, label area, window tint, and tape color to match your brand or visual theme.
The component also includes 3D extrusion controls that simulate physical depth using layered panels and perspective, along with adjustable shadow blur, opacity, and offset for realistic placement on any background. You can even place an image inside the label area to simulate album art or branding.
All settings are controlled directly from the Framer panel, making it easy to drop into any layout and style without writing code.
Key Features3D rotating cassette animationAuto play toggle for reel rotationAdjustable roll speedCustom cassette body, label, window, and tape colorsImage upload for label artwork3D extrusion depth and color controlsSoft shadow with blur, opacity, and offset settingsResponsive and scalable layout
Use CasesMusic and audio product landing pagesRetro themed websitesHero section visual accentsBrand storytelling sectionsPortfolio and creative showcases
Best Practices / TipsUse subtle roll speeds for calm, ambient motionMatch label images with brand or album artworkIncrease extrusion depth for dramatic 3D effectUse soft shadows to anchor the cassette on light backgrounds
What’s IncludedOne Rolling Cassette componentAnimated rotating reels3D extrusion and depth stylingColor controls for all cassette partsLabel image upload supportShadow and perspective controls
Who It’s ForFramer designers creating animated hero visualsMusic and media focused websitesDesigners building retro or playful interfacesNo-code builders who want advanced 3D motion without WebGL
Plaiter
