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://pbs.twimg.com/profile_images/1897311929028255744/otxpL-ke_400x400.jpg',
},
{
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://pbs.twimg.com/profile_images/1927474594102784000/Al0g-I6o_400x400.jpg',
},
{
id: 9,
name: 'Matt Perry',
src: 'https://cdn.21st.dev/assets/mirror/8e/8ec5623088d98503782e468e71f702a315a6a90468d17b01ad9a32e9569d140f.jpg',
},
];
export default function DemoOne() {
return <Component orbitItems={ITEMS} />;
}