Glass Code Block

// src/Root.tsx
import { Composition } from "remotion";
import { GlassCodeBlock } from "@/components/remocn/glass-code-block";
 
const GlassCodeBlockScene = () => (
  <GlassCodeBlock
    title="hero.tsx"
    code={`export function Hero() {\n  return <h1>Hello</h1>;\n}`}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="GlassCodeBlock"
    component={GlassCodeBlockScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

import { Backdrop } from "@/components/remocn/backdrop";
import { GlassCodeBlock } from "@/components/remocn/glass-code-block";
 
<Backdrop fill={{ type: "color", value: "#0a0a0a" }}>
  <GlassCodeBlock title="hero.tsx" code={`export function Hero() {\n  return <h1>Hello</h1>;\n}`} />
</Backdrop>