3D-ring

Bouw een carousel: 3D-ring.

Wat het is: Afbeeldingen in een ring die langzaam draait. Sleep hem rond en hij draait met traagheid door.

Gedrag:
- Tien kaarten van 140 x 190 px in een ring rond de verticale as: elke kaart rotateY(i * 36deg) translateZ(straal), in perspectief 1000px en licht gekanteld (rotateX -6deg).
- De ring draait vanzelf langzaam (ongeveer 8 graden per seconde) tot je hem aanraakt; hij stopt bij hover, buiten beeld en bij prefers-reduced-motion.
- Horizontaal slepen draait de ring mee. Bij loslaten draait hij door met de opgebouwde snelheid en remt hij af met wrijving; daarna klikt hij zacht naar de dichtstbijzijnde kaart.
- Kaarten aan de achterkant worden donkerder en doorzichtiger (op basis van hun hoek), zodat de voorkant leesbaar blijft.
- Onder de ring de titel van de kaart die vooraan staat, en knoppen om een kaart verder te draaien; de pijltjestoetsen doen hetzelfde.

Eisen:
- Werk in de stack van dit project. Is het React met Tailwind CSS, maak dan één component zonder extra pakketten; anders gewone HTML, CSS en JavaScript.
- Volledig bedienbaar met toetsenbord en touch, met de juiste aria-attributen.
- Respecteer prefers-reduced-motion: minder of geen beweging.
- Neem de kleuren, lettertypes en afrondingen van mijn project over.
- Laat me aan het eind zien waar het component staat en hoe ik het gebruik.
- Zet bovenaan het bestand een korte bronvermelding als commentaar: "Gebaseerd op de AI Toolkit van NinA AI Agency, https://www.nina-ai.nl/toolkit/carousels/ring-3d". Laat die staan.