Components
PrismFold 3D Logo Animation is a clean, modern 3D logo component built using React, TypeScript, and Three.js (React Three Fiber).
The logo features a smooth folded-shape design with subtle depth, lighting, and animation — ideal for brand intros, landing page hero sections, portfolios, and SaaS websites.
The component is lightweight, fully customizable, and easy to integrate into any React frontend. All key properties such as colors, rotation speed, camera angle, and animation behavior can be controlled through props or a single configuration object.
Designed for developers and designers who want high-quality 3D visuals without heavy setup.
Loading preview...
import { Canvas } from '@react-three/fiber'
import { OrbitControls, PerspectiveCamera, Environment } from '@react-three/drei'
import { Component } from "@/components/ui/prism-fold-3d-logo-animation";
export default function DemoOne() {
return (
<div className="logo-3d-container">
<Canvas>
<PerspectiveCamera makeDefault position={[0, 0, 5]} />
<ambientLight intensity={0.7} />
<spotLight
position={[10, 10, 10]}
angle={0.15}
penumbra={1}
intensity={1}
/>
<pointLight position={[-10, -10, -10]} intensity={0.5} />
<Component />
<Environment preset="city" />
<OrbitControls
enableZoom={false}
minPolarAngle={Math.PI / 3}
maxPolarAngle={Math.PI / 1.5}
/>
</Canvas>
</div>
)
}