"use client";
import { ThreeDMarquee } from "@/components/ui/3d-marquee";
export default function ThreeDMarqueeDemo() {
const images = [
"https://cdn.21st.dev/assets/mirror/0c/0c1b9daa8958761bd680a7472a0fca30695372b04b3768afb6f925c80ad51ac2.png",
"https://cdn.21st.dev/assets/mirror/cc/cc54cab20e500bfc666a3d006fcbea92ee57407b552d7a40702ffb13e375d145.png",
"https://cdn.21st.dev/assets/mirror/92/92c8376dba8be3292150d2d9c71e88658ed8f1706c70edf559124e8c46a6a1ad.webp",
"https://cdn.21st.dev/assets/mirror/cc/cc2dfc8dfedb1750610c30282ddf350fc19c0be5cfe9425bb15fd2829e0851fc.png",
"https://cdn.21st.dev/assets/mirror/13/138b5c6c771c7ee2e669ed5c41fc10f258fb2e62ebebaa9257ca2fa44c207f71.png",
"https://cdn.21st.dev/assets/mirror/8e/8e2c324b6f6f74f376ab36778066ddddd3c6c8c516536506989c3b48673193ee.png",
"https://cdn.21st.dev/assets/mirror/33/33c3b297f01fefa675d7a209206836824e9c27f803dcb6627831e8c37f1ba28d.png",
"https://cdn.21st.dev/assets/mirror/96/9659640f579d0b0cb0ce5fb0ab075bb670f7eec1308e6dcf21af4c68b5363e7b.png",
"https://cdn.21st.dev/assets/mirror/27/27954035d8ec50e6708cef496cdf1673ac724e534fcaba367582b3bb2d5a09d5.png",
"https://cdn.21st.dev/assets/mirror/c8/c811c67928c08fcf3c1cb56a0c3ee24121983e7ce4ec03d857f2155afd319ec9.webp",
"https://cdn.21st.dev/assets/mirror/4f/4f392821d1bac633efcd1bd5ad82afa7f28b72871fc02a3ce9e968f72d2643d2.png",
"https://cdn.21st.dev/assets/mirror/fb/fbedb15cda77cdccdda1f3593ce4f7d1b44ff6ee7092a0f37416a16471894a18.png",
"https://cdn.21st.dev/assets/mirror/0f/0f57e305728baa3e2690572d1ec87857985891e33cf17d8da562b7c0fa2b61aa.png",
"https://cdn.21st.dev/assets/mirror/80/80b00b6a3290eddc107450ff35cc8e5f202122cb4c140d4f93b4df86138b846c.png",
"https://cdn.21st.dev/assets/mirror/94/94b4a94744fbed20bdf0d5a391fcaeb7712659b881ad7f25ed5e171c6b0bedef.webp",
"https://cdn.21st.dev/assets/mirror/4d/4d991b9d5c68e83913c516dcba1ef2fab1e7d6afc28da8db328cd6df880f5829.png",
"https://cdn.21st.dev/assets/mirror/ea/ea462a1a1c0345dbc39a45ef6ec9136759e22e09d8a47ce6258d0129485fc544.png",
"https://cdn.21st.dev/assets/mirror/45/458e84cb32abb12e1925f65fe4a7fd1ba691145faa7c348961dc539a824f142d.png",
"https://cdn.21st.dev/assets/mirror/80/804ba514e4b77e1ddf56595bac13a5e233746eb736a113c084b0ce4213a34572.png",
"https://cdn.21st.dev/assets/mirror/84/84111d091fd2cea221562ea64c052739702183067894c707c9cc100264cdd68b.png",
"https://cdn.21st.dev/assets/mirror/e8/e8848272d3b319d168f6a98ba059b9da7a9db84a416a099ba2540a94dd4da83d.webp",
"https://cdn.21st.dev/assets/mirror/f2/f2ff6364c66b4ffa58bd614f9fe014170fb508510449794e852b4d53fc3c9ff4.png",
"https://cdn.21st.dev/assets/mirror/ef/ef25579d8e901076fd49227b766c6a57b0597e59cd7a24a81f7dccdd893a7b26.png",
"https://cdn.21st.dev/assets/mirror/22/221c9fa186791f84a658e91e86763dd62409f020e4708dc089b25db43228f84a.png",
"https://cdn.21st.dev/assets/mirror/14/14c3f7a38fbf518a920f48f17602641a9b7cd80d6e0946da024a2745a5148f52.png",
"https://cdn.21st.dev/assets/mirror/44/44c22d45c939c0e3f7f7ee6e9cdbe2a94ed15a4231ebee810e7fec73387ff0a6.png",
"https://cdn.21st.dev/assets/mirror/7d/7d436ba5e940394d4ddf9a13e27d779b0786d0adee7dfc0ab3bc5287bb198f19.png",
"https://cdn.21st.dev/assets/mirror/32/324044404c1e35fdb445316531598f0f27b93cb3045a09ca8efaa977c3e29c04.png",
"https://cdn.21st.dev/assets/mirror/bd/bdc8d01e5c55a54ad5069f88318453e4941e03ca484ddf2f1a41ea1e4d1db74b.png",
"https://cdn.21st.dev/assets/mirror/7f/7f264ef88d660aed1cbefa5b7c8022daf638ac420022ce7d1783851f6d18f93d.png",
"https://cdn.21st.dev/assets/mirror/fe/fe7b30b12e4781380531c4058fc894e989e6614b14d096cd2fa3b6c98d02a75e.webp",
];
return (
<div className="mx-auto my-10 max-w-7xl rounded-3xl bg-gray-950/5 p-2 ring-1 ring-neutral-700/10 dark:bg-neutral-800">
<ThreeDMarquee images={images} />
</div>
);
}
Part of Aceternity UI — browse the full library on 21st.dev.