A circular intro animation component that arranges elements in a radial layout, smoothly transitioning them into orbit with looping motion.
import { Component } from "@/components/ui/radial-intro";
const ITEMS = [
{
id: 1,
name: "Framer University",
src: "https://cdn.21st.dev/assets/mirror/dc/dccf07dde4470272d64ae3000768bedca2ac478a0c31c02a011f7ceb2d3ca392.jpg",
},
{
id: 2,
name: "arhamkhnz",
src: "https://cdn.21st.dev/assets/localized/dcbd1f440d0c95b1438a854dca3e23c7171ca4703e6d58ee91e98c159b1874c6.png",
},
{
id: 3,
name: "Skyleen",
src: "https://cdn.21st.dev/assets/mirror/4d/4dfcb3c259477ef1e2a067f1b2b27cd384e65c62e4b0fce9eed02608cb4a0027.jpg",
},
{
id: 4,
name: "Shadcn",
src: "https://cdn.21st.dev/assets/mirror/e9/e941f86e0ca2b1c9eefd47618a92040443f85598470bad47399cee7f259c0756.jpg",
},
{
id: 5,
name: "Adam Wathan",
src: "https://cdn.21st.dev/assets/mirror/7b/7bc0cc1e66037830ac2bc11ecd407164debb9c96d61ab57fd33e8c5ac0342f46.jpg",
},
{
id: 6,
name: "Guillermo Rauch",
src: "https://cdn.21st.dev/assets/mirror/bd/bda00209d3375399bf57be3d3ac7aa59d1b293e08baf486a141fcd3a612184bf.jpg",
},
{
id: 7,
name: "Jhey",
src: "https://cdn.21st.dev/assets/mirror/e6/e6e12f0e31f875e51a24c5ba62eac783c0361815bc2eba5eef6f9c8ca1bf0466.jpg",
},
{
id: 8,
name: "David Haz",
src: "https://cdn.21st.dev/assets/localized/d9ee1abec7266e75c633090f4fed774a47d04ea683796c401c22286126c7918e.png",
},
{
id: 9,
name: "Matt Perry",
src: "https://cdn.21st.dev/assets/mirror/8e/8ec5623088d98503782e468e71f702a315a6a90468d17b01ad9a32e9569d140f.jpg",
},
];
export default function DemoOne() {
return <Component orbitItems={ITEMS} />;
}