Masked Slide Reveal

"use client";

import { Player } from "@remotion/player";
import { MaskedSlideReveal } from "@/components/ui/masked-slide-reveal";

const MaskedSlideRevealScene = () => (
  <MaskedSlideReveal
    text="Reveal from the mask"
    staggerDelay={s.staggerDelay}
    fontSize={s.fontSize}
    color="#171717"
    fontWeight={s.fontWeight}
    speed={s.speed}
  />
);

const settings = {
  staggerDelay: 3,
  fontSize: 72,
  fontWeight: 700,
  speed: 1,
  durationInFrames: 90,
  fps: 30,
  compositionWidth: 1280,
  compositionHeight: 720,
  controls: false,
};

export default function DemoDefault(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen">
      <Player
        component={MaskedSlideRevealScene}
        durationInFrames={s.durationInFrames}
        fps={s.fps}
        compositionWidth={s.compositionWidth}
        compositionHeight={s.compositionHeight}
        controls={s.controls}
        autoPlay
        loop
        style={{ width: "100vw", height: "100vh" }}
      />
    </div>
  );
}