Brand Guidelines

$ pnpm dlx shadcn@latest add @remocn/brand-guidelines

Brand Guidelines presents the fictional object-design studio Form Study. An architectural mark leads into terracotta, graphite, stone, and paper; a type specimen types and deletes itself before changing styles. Original still-life photographs and editable brand posters travel through a layered collage. Three flipping tiles become “Make / Ideas / Real.” before the closing wordmark resolves back to the mark.

The complete composition is 1072 frames at 60 fps, 1920×1080 (17.87 seconds). All motion is frame-driven React and SVG. The photographs are newly AI-generated, bundled with the template, and replaceable. No reference video, third-party logo, remote image dependency, or original soundtrack is used.

Usage

import { Composition } from "remotion";
import { BrandGuidelines } from "@/components/remocn/templates/brand-guidelines";
 
export const Root = () => (
  <Composition
    id="BrandGuidelines"
    component={BrandGuidelines}
    durationInFrames={1072}
    fps={60}
    width={1920}
    height={1080}
    defaultProps={{}}
  />
);

Customize

<BrandGuidelines
  brandName="Your Studio"
  accentColor="#285A50"
  theme={{ ink: "#242321", stone: "#D6CFC4", paper: "#F5F1E9" }}
  content={{
    openingTagline: "A new point of view.",
    guidelinesLabel: "Visual identity",
    collageTitle: "Objects for a slower everyday.",
    collectionLabel: "The first collection",
    footer: "Your identity. Your story.",
  }}
  phrases={[
    "Thoughtful objects.", "Everyday rituals.",
    "Find your form.", "Quiet by design.",
    "Make space.", "Feel the texture.",
    "Shape the everyday.", "Made to last.",
  ]}
  closingWords={["Imagine", "Make", "Share."]}
/>

brandName overrides content.brandName; accentColor overrides theme.accent. Palette labels always reflect the supplied theme colors. phrases contains eight slots: the first two type on (the first also backspaces), followed by six quick style cuts. closingWords contains three independently animated words. Missing or blank entries in partial lists preserve the corresponding defaults.

Keep specimens to short phrases (ideally 25 characters or fewer), closing words to 10 characters, and brand names to 24 characters. Type scales down for longer overrides. Font families and weights can be changed in scenes/typography.tsx; the default Manrope and Inter faces are bundled through Fontsource.

Timeline

The palette/type overlap creates a continuous push. The type specimen remains behind the collage. Each chapter is a named Studio sequence. Other frame rates are supported by scaling the reference clock; use Math.round(1072 / 60 * fps) for the composition duration. The 960×540 design space scales uniformly and letterboxes in other aspect ratios; it does not reflow into a vertical layout.

Static photographs use native images only in the interactive Studio preview to avoid a nested media-registration update loop in Remotion 4.0.513. Change them through the composition's photos props. Exports and embedded players use Remotion Img, including its image-loading guarantee.

For an embedded player, connect the viewer's reduced-motion preference to reducedMotion and disable autoplay. Exported files use the chosen prop value.

Local preview

bun run studio:brand-guidelines
bun run review:brand-guidelines
bun run render:brand-guidelines

The review command captures 36 timeline samples and six customization samples under out/brand-guidelines/. The optional render writes out/brand-guidelines.mp4.