Footer 3d
The Footer is a reusable and dynamic component built with React, Tailwind CSS, and React Three Fiber. It includes a customizable 3D background model (default animated Cube) and flexible content areas for links, socials, and credits.
✨ Features
- Dynamic 3D Model — Uses a default shader-based cube but allows injection of any custom Three.js / R3F model via
modelprop. - Props-driven API — Easily pass socials, navigation links, email, location, and credits.
- Responsive Layout — Works across mobile, tablet, and desktop.
- Parallax Animation — Smooth scroll-based entrance animation for central text.
- Default Values — Drop-in ready without extra configuration.
⚠️ Disclaimer
This component requires the following dependencies:
npm install three @react-three/fiber @react-three/drei framer-motionGSAP
Framer Motion
🔧 Props
| Prop | Type | Default | Description |
|---|---|---|---|
email | string | fingui$in@gmail.com | Footer email text. |
location | string | India, Kolkata | Location shown under email. |
socials | { name: string; href: string }[] | LinkedIn, Github | Social links with icon. |
navLeft | { name: string; href: string }[] | Contact, Blogs, Collaboration | Left navigation links. |
navRight | { name: string; href: string }[] | Docs, Theme, Components | Right navigation links. |
language | string | EN | Language toggle text. |
credits | string | `© In_Cognita - 2025 | Pierre Patrault & Aristide Benoist` |
legal | { name: string; href: string }[] | Legal & Terms, Privacy | Legal and policy links. |
model | React.ReactNode | DefaultCube | Custom 3D model component. |
Default Usage
import {Footer} from "@/components/ui/footer"
export default function Page() {
return (
<div>
{/* Your page content */}
<Footer />
</div>
)
}With Custom Props
<Footer
email="support@example.com"
location="Tokyo, Japan"
socials=[
{ name: "Twitter", href: "https://twitter.com" },
{ name: "Dribbble", href: "https://dribbble.com" },
]
navLeft=[
{ name: "About", href: "/about" },
{ name: "Careers", href: "/careers" },
]
navRight=[
{ name: "Docs", href: "/docs" },
{ name: "Changelog", href: "/changelog" },
]
credits="© YourCompany - 2025 | Built with ❤️"
legal=[
{ name: "Privacy", href: "/privacy" },
{ name: "Cookies", href: "/cookies" },
]
/>With Custom 3D Model
import { Sphere } from "@react-three/drei"
<Footer
model={
<mesh>
<Sphere args={[2, 64, 64]}>
<meshStandardMaterial color="hotpink" wireframe />
</Sphere>
</mesh>
}
/>