3D Showcase Hero
Hero section with a Three.js icosahedron gem at the center and eight image cards that orbit on hover. Click while hovering to trigger a burst animation. Built with raw Three.js (no R3F) and Framer Motion.
HeroReactThree.jsFramer Motion
CSSCustom CSS
Manual
Create a file and paste the following code into it.
src/App.tsx
1
2
3
4
5
6
import ThreeDShowcaseHero from "@/components/three-d-showcase-hero";
export default function App() {
return <ThreeDShowcaseHero />;
}
Update the import paths to match your project setup.