Add some dynamicity to your website with these dynamic frame layouts
"use client"
import * as React from "react"
import { DynamicFrameLayout, FrameData } from "@/components/ui/dynamic-frames"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
// --- DEMO DATA ---
// New set of visually diverse, frameless videos.
const initialFrames: FrameData[] = [
{
id: 1,
video: "https://cdn.21st.dev/assets/mirror/05/05bd857af7f70bf51b6aac1144046973bf3325c9101a554bc27dc9607dbbd8f5.mp4",
defaultPos: { x: 0, y: 0 },
corner: "", edgeHorizontal: "", edgeVertical: "",
},
{
id: 2,
video: "https://cdn.21st.dev/assets/mirror/b0/b0e9bdf0f8b8f589114fc9fcfd574e5233a219e826c97d6f00684079e140bdfc.mp4",
defaultPos: { x: 1, y: 0 },
corner: "", edgeHorizontal: "", edgeVertical: "",
},
{
id: 3,
video: "https://samplelib.com/lib/preview/mp4/sample-30s.mp4",
defaultPos: { x: 2, y: 0 },
corner: "", edgeHorizontal: "", edgeVertical: "",
},
{
id: 4,
video: "https://cdn.21st.dev/assets/mirror/8b/8bb535d2935c901e83a7ae971c3bf078b84581754035e0aab913d895b45c517a.mp4",
defaultPos: { x: 0, y: 1 },
corner: "", edgeHorizontal: "", edgeVertical: "",
},
{
id: 5,
video: "https://cdn.21st.dev/assets/mirror/f1/f116ba6234c724a33bb2c4a1ff0bc832a4e6a5e4bf32d2a9a0e314ef06a6c1db.webm",
defaultPos: { x: 1, y: 1 },
corner: "", edgeHorizontal: "", edgeVertical: "",
},
{
id: 6,
video: "https://cdn.21st.dev/assets/mirror/85/852cf16ad85e8741d9c6c8805d1b97c59342177e375b2c9a229da5506f3620c2.mp4",
defaultPos: { x: 2, y: 1 },
corner: "", edgeHorizontal: "", edgeVertical: "",
},
{
id: 7,
video: "https://cdn.21st.dev/assets/mirror/78/78c959a9445f51819aee96308ddede4b6c4977bfbde7ace88d2fc6a7c309d01c.mp4",
defaultPos: { x: 0, y: 2 },
corner: "", edgeHorizontal: "", edgeVertical: "",
},
{
id: 8,
video: "https://cdn.21st.dev/assets/mirror/53/5372b7a77aa66fbeee647c92683abbfc3fd46cfae230d73135691fc5d53bcdfc.mp4",
defaultPos: { x: 1, y: 2 },
corner: "", edgeHorizontal: "", edgeVertical: "",
},
{
id: 9,
video: "https://cdn.21st.dev/assets/mirror/2d/2dfcf9aa633a6c85c48c7d1f1920d44ea737ef0d37aee96058de990dde526729.mp4",
defaultPos: { x: 2, y: 2 },
corner: "", edgeHorizontal: "", edgeVertical: "",
},
]
export default function DynamicFrameLayoutDemo() {
const [autoplayMode, setAutoplayMode] = React.useState<"all" | "hover">("all")
return (
<div className="w-full min-h-screen bg-background text-foreground flex items-center justify-center p-4">
<div className="w-full max-w-6xl h-[80vh] flex flex-col gap-6">
<div className="flex flex-wrap items-center gap-6">
<div className="flex items-center space-x-2">
<Switch
id="autoplay-toggle"
checked={autoplayMode === "all"}
onCheckedChange={(checked) => setAutoplayMode(checked ? "all" : "hover")}
aria-label="Toggle autoplay mode"
/>
<Label htmlFor="autoplay-toggle">Autoplay All</Label>
</div>
</div>
<DynamicFrameLayout
frames={initialFrames}
initialShowFrames={false} // Frames are now disabled by default
initialAutoplayMode={autoplayMode}
// You can further customize props here:
// hoverSize={7}
// gapSize={8}
/>
</div>
</div>
)
}