ReviewCylinder3D

How It Works

Cards are positioned on an invisible cylinder using trigonometric arc math. Each card's X position, depth (Z), Y-rotation, scale, and opacity are derived from its angular offset, creating a convincing infinite-scroll 3D loop that runs entirely in CSS transforms — no canvas, no WebGL.

Key Features

• 3D cylinder arc — mathematically accurate perspective with per-card scale and opacity falloff

• Infinite auto-scroll — smooth loop in either direction with configurable speed

• Pause on hover — stops animation when the user engages

• Review cards — star ratings, headline, body copy, date, and optional Verified badge

• Flexible avatars — supports uploaded images or auto-generated colour initials

• Warm glow FX — pure CSS radial gradients, zero blur overhead

• Full Framer controls — accent colour, fonts, card size, arc radius, angle step, perspective depth, side card count, and more

Use Cases

• SaaS landing pages showcasing social proof

• E-commerce product pages with customer testimonials

• Agency or portfolio sites building credibility

• App marketing pages needing a premium feel