About Stellar Card Gallery
Description
Turn any set of images into an explorable 3D galaxy. Stellar Card Gallery arranges your photos as floating cards on layered orbital spheres. Visitors can drag to look around, scroll or pinch to zoom, and click any card to open it in a detailed view with a 3D tilt effect.
It's built as one lightweight component with no external libraries. There's no three.js and nothing loads from a CDN. Cards are rendered with CSS 3D, and the starfield and wireframe orbits are drawn on canvas. It only animates while something is moving and pauses when it's off-screen. In the Framer editor it shows a clean still preview.
Drop it on a page, add your images, and you have a portfolio, product showcase or moodboard that people actually want to play with.
Features
Orbit, zoom and pan: drag to rotate, scroll or pinch to zoom, right-drag or Shift-drag to pan, with smooth inertia.
Floating 3D cards: each card faces the camera and is depth-sorted across three orbital layers.
Hover glow: cards scale up with an accent-coloured glow on hover.
Detail modal: a large image with a 3D tilt on mouse move, a Download button and a favourite toggle. It closes with Esc or by clicking outside.
Animated starfield: 10,000 stars drifting slowly. You can turn it off or change its speed.
Wireframe orbit spheres: subtle guides in your accent colour.
Responsive: the camera moves back automatically on tablets and phones so every card stays in view.
Mobile-friendly: horizontal swipes orbit and vertical swipes still scroll the page, which you can turn off.
Performance-conscious: no continuous loop, it pauses off-screen and in background tabs, and it respects reduced motion.
Accessible: cards can be reached with the keyboard (Tab, then Enter) and the modal has ARIA labels.
