Signup Flow

Install this video

Adds the full composition, its remocn dependencies, and the prompt to your Remotion project via the shadcn registry.

$ pnpm dlx shadcn@latest add kapishdima/remocn-demo/signup-flow

Render it locally

Renders the MP4 on your machine with the Remotion CLI.

$ pnpm dlx remotion render signup-flow out/signup-flow.mp4 --scale=2 --crf=15 --x264-preset=slower --jpeg-quality=95

The prompt

Reconstructed draft

A reconstruction of the prompt this video was generated from.

Put together a short animated demo of a signup form flow, built entirely from remocn primitives — inputs, buttons, transitions between steps, that kind of thing. I just want to see a clean multi-step signup (something like email, then password, then a confirmation state) animate smoothly from one step to the next, nothing fancy around it, just the form itself as the whole video.

The code

The exact source the AI wrote — the same files the install command puts in your project.

import React from "react";
import { loadFont } from "@remotion/google-fonts/Inter";
import { RemocnUIProvider } from "@/lib/remocn-ui";
import { SignupFlow } from "@/components/remocn/signup-flow";

// Capture Inter's font family and expose it as `--font-geist-sans`, the CSS
// variable the remocn components reference for their `fontFamily`. Without
// this binding the variable is undefined inside the Remotion render and the
// components fall back to a system font.
const { fontFamily } = loadFont("normal", {
  subsets: ["latin"],
  weights: ["400", "700"],
});

export const SignupFlowDemo: React.FC = () => (
  <RemocnUIProvider>
    <div
      style={
        {
          width: "100%",
          height: "100%",
          "--font-geist-sans": fontFamily,
        } as React.CSSProperties
      }
    >
      <SignupFlow />
    </div>
  </RemocnUIProvider>
);