Shutterform

Shutterform is an interactive 3D photography gallery for Framer, built with React and Three.js. Featuring a chrome analog camera and floating photo cards, it offers Rings, Spiral, and Grid layouts with cinematic camera interactions.

Features & Interactions

• Animated 3D Camera: A chrome camera that aims at photos and performs shutter animations.

• Three Gallery Layouts: Explore Rings, Spiral, and Grid compositions.

• Cinematic Lens View: Click photos to trigger flash effects, opening iris, and focus transitions.

• Camera Effects: Shutter sounds, flash animations, and camera-inspired HUD.

• Interactive Grid: Photo cards respond to cursor movement with depth and ripple effects.

• Customizable Appearance: Camera finishes, colors, themes, and alternative center objects, including a voxel rose or custom GLB model.

• Flexible Photo Cards: Add images, titles, subtitles, links, and hover tooltips.

• Extensive Controls: Adjust spacing, radius, curvature, rotation, tilt, and interaction sensitivity.

• Responsive Design: Flexible sizing with placeholder visuals for missing images.

Where to Use

• Photography portfolios

• Fashion editorials and digital lookbooks

• Creative agency websites

• Brand campaigns and product showcases

• Interactive landing pages

• Art direction and visual storytelling

Technical Notes

Shutterform uses Three.js via an external CDN and requires an internet connection. WebGL performance depends on the visitor's device and browser. Around 20–40 photo cards are recommended for smoother performance. Shutter audio uses the Web Audio API and requires initial user interaction.

Bring your photography to life with Shutterform.