Floating Icons
An animated background with floating technology icons.
Preview
Interactive Preview
Astro
React
Next.js
Vue.js
Nuxt
Vite
Tailwind CSS
Floating Icons Block
A dynamic background for your landing pages.
Installation
Usage
tsx
import { FloatingIcons } from "@/components/block/floating-icons"
export default function LandingPage() {
return (
<div className="relative h-screen bg-black">
<FloatingIcons className="opacity-50" />
<div className="relative z-10 flex items-center justify-center h-full">
<h1 className="text-white text-6xl font-bold">Orix</h1>
</div>
</div>
)
}Dependencies
@iconify/react
Props
| Prop | Type | Default |
|---|---|---|
| className | string | - |