Dynamic Frames

Galleries 3

About

Add some dynamicity to your website with these dynamic frame layouts

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Dynamic Frames to your project and fits it to your theme.

Code

How Dynamic Frames is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  )
}