Immersive 3D cylinder layoutCards are wrapped around an invisible vertical cylinder using pure CSS 3D transforms, creating a realistic rotating showcase without relying on WebGL or Three.js.
Dynamic lens perspective effectCards above the center gradually recede into depth while cards below move forward and expand, creating a curved lens effect that naturally draws attention toward the focused item.
Infinite vertical loopingContent continuously wraps around the cylinder, allowing seamless scrolling without visible start or end points.
Center-focused hierarchyThe active card remains visually dominant while surrounding items progressively fade into the background through depth, scale, and perspective adjustments.
Mixed media supportDisplay both images and videos within the same carousel for flexible content presentation across portfolios, products, case studies, and storytelling experiences.
–––––––––––––––––––––––––––
Drag-to-scroll navigationExplore content naturally using smooth click-and-drag interactions.
Mouse wheel controlsEnable effortless vertical navigation with optional wheel-based scrolling.
Auto-scroll systemCreate ambient movement with adjustable speed and direction controls.
Click-to-preview mediaOpen any card in a fullscreen preview modal for distraction-free viewing.
Infinite content flowCards continuously cycle through the cylinder without interruptions or abrupt resets.
Performance-aware behaviorAnimations automatically pause when outside the viewport for improved efficiency.
Reduced motion supportRespects accessibility preferences while maintaining a polished experience.
–––––––––––––––––––––––––––
Fully customizable via the properties panel:
Style presets (Default, Minimal, Bold, Retro)
Card size controls
Cylinder radius adjustment
Rotation per step
Perspective depth controls
Visible card range
Auto-scroll speed
Auto-scroll direction
Drag interactions
Mouse wheel controls
Visual scrollbar customization
Mat color styling
Mat margin controls
Border radius settings
Side label styling
Pole glow effects
Background customization
Shadow intensity
Modal blur intensity
Modal border radius
Responsive sizing
–––––––––––––––––––––––––––
DesktopLarge immersive cylindrical layouts with maximum depth, perspective, and smooth interactions.
TabletOptimized scaling and motion adjustments for balanced usability and visual impact.
MobileTouch-friendly interactions with refined performance and responsive layouts for smaller screens.
Viewport optimizedAnimations intelligently pause when outside the viewport to reduce unnecessary processing.
Editor-aware controlsSupports Framer editor and canvas environments for smoother design workflows and previews.
–––––––––––––––––––––––––––
Product showcases
Portfolio galleries
SaaS landing pages
AI startup websites
Brand storytelling
Timeline presentations
Case studies
Creative showcases
Media galleries
Interactive presentations
–––––––––––––––––––––––––––
Creates strong visual depth and focus
Makes content browsing feel immersive
Encourages user exploration
Elevates standard galleries with cinematic motion
Combines premium aesthetics with smooth performance
Provides a memorable browsing experience without complex technologies
–––––––––––––––––––––––––––
Ready in minutesSimply add the component, customize it through the properties panel, and you're ready to go.
Supports images and videosShowcase media-rich content without limitations.
Highly customizableAdjust depth, motion, styling, interactions, and layouts to fit your brand perfectly.
Smooth performanceBuilt with optimized CSS 3D transforms for fluid animations and responsive interactions.
Creates a premium experienceAdds cinematic depth and motion that helps your website stand out from generic galleries.
Made for FramerDesigned specifically for Framer workflows with intuitive controls and easy customization.
Responsive by defaultLooks great across desktop, tablet, and mobile devices.
Built with accessibility in mindSupports reduced-motion preferences and performance-aware behavior.
–––––––––––––––––––––––––––
Vertical Cylindera is just one piece.
At Blanq Studio, we design and build conversion-focused Framer websites for SaaS, AI, and modern brands — crafted to feel premium, interactive, and built to convert.
From high-performing landing pages to fully custom digital experiences, every detail is designed to help brands stand out online.
–––––––––––––––––––––––––––
Sameer
