Lexington Motion

What Lexington Motion is

Lexington Motion is a pack of motion templates built with Remotion, the React framework for programmatic video. Every template is a small React component: you point it at your screenshots or type in your numbers, press play, and render an MP4. No After Effects, no keyframes, no timeline to fight.

The pack is included with Studio and Agency Full Access and is also sold standalone. Everything renders at 30 fps:

Browse every category with previews on the Lexington Motion page.

Requirements

• Node.js 20 or newer and npm.
• A Chromium browser. Remotion downloads a headless one on first render if it cannot find Chrome.
• Basic comfort with a terminal. You do not need to write React to use the templates, only to change them.

Remotion is free for individuals and companies of up to three people. Larger teams need a Remotion company license in addition to the Lexington license.

Getting the repository

Delivery works like the themes. After purchase, accept the GitHub invitation from your Polar library, then fork or download the lexington-motion repository. Please do not open pull requests against it; work in your fork.

Quick start

npm install
npm run dev

Remotion Studio opens in your browser. Compositions are foldered by category in the sidebar (Grid-01, Carousel-03, Promo-07, Charts/Bars-01 and so on). Select one, press play, and edit its props in the panel on the right; changes show live.

Adding your own images

1. Drop your screenshots into public/, for example public/shots/hero.png.
2. Select a composition and set the images prop in the Studio panel:

{
  "images": ["shots/hero.png", "shots/pricing.png", "shots/blog.png"]
}

• Landscape 16:10 screenshots read best. Images fill the card and crop from the bottom, so the top of a page stays visible.
• Templates cycle through however many images you provide; Promo films want 12 to 16 to fill every slot.
• With images empty, templates render numbered placeholder cards, as in the previews on this site.
• Tiles templates slice one image into cells. If your screenshots have built-in padding, raise imageZoom (for example 1.2).

Text props

Typography, Promo, Trailer and Type templates take text instead of, or as well as, images. The repository README lists every template’s exact props.

Chart data

Charts take no images. Select one in Studio, open the props panel and replace the sample numbers; the layout, axis maximum and the number of bars, rings, cells or ribbons follow from what you pass in.

Nearly every chart takes title, subtitle and source (the small line at the bottom), plus prefix and suffix wrapped around every printed number ("$" and "" for money, "" and "%" for rates). Numbers from 10,000 print as 12.4k and from 1,000,000 as 1.2M.

The data shapes you will meet:

Sensible ranges: 4 to 12 bars, slices or periods; 5 to 8 radar axes; 3 to 6 funnel steps; up to 12 rows in tables and heat tables. The layouts are placed by hand for those counts.

Rendering

Render any composition to MP4 from the terminal:

npx remotion render Grid-01 out/my-video.mp4

Keep a brand’s props in a JSON file so every render uses the same set:

npx remotion render Grid-01 out/my-video.mp4 --props=props/my-brand.json

Rendering runs on your machine through a headless browser: a social loop takes one to three minutes, a chart well under one.

Output formats

Social, Testimonials and App templates are designed at 4:5 (1080x1350) and take a format prop for other ratios: "1:1", "9:16" or "4:3". Charts are designed at 16:9 and take "1:1", "4:5" or "9:16". Logo, Intro, Outro, Code, Before and after, Prompt and chat, Cursor and clicks, Social proof, Notifications, Devices, Podcast and Countdown templates take it too, and Top 10 takes "9:16".

npx remotion render Grid-01 out/square.mp4 --props='{"format":"1:1"}'

Squarer formats crop the top and bottom, and 9:16 adds canvas above and below for story safe areas. Motion and timing stay the same, so loops still close.

Useful variations:

• Still frame (for a poster or thumbnail): npx remotion still Grid-01 out/poster.png --frame=90
• GIF: add --codec=gif
• Transparent background (WebM with alpha, for compositing): set the canvas to transparent in the theme, then --codec=vp9 --image-format=png
• Smaller files: add --crf=28 (higher is smaller); the default is visually lossless

Using a render on your website

Web templates are designed for <video> backgrounds:

<video autoplay muted loop playsinline poster="/hero-poster.webp">
  <source src="/hero-loop.mp4" type="video/mp4" />
</video>

Keep muted and playsinline so mobile browsers autoplay, and provide a poster so the first paint is not blank.

Restyling the whole pack

Every template reads the same design tokens from src/shared/theme.ts: named presets for the canvas, card fill, ink, corner radius, gap and image fit, with ACTIVE picking the one that renders. Change a preset once and every social, web and promo template follows. Charts read their palette from src/shared/chart.ts the same way. Trailers and Type films carry their own look per style.

Changing a template

Each template is one readable React component under src/templates/<category>-<nn>/. Shared pieces sit in src/shared/: the Card, easing curves in motion.ts, a 3D Stage for Promo films, and helpers for lanes, tiles and nested cards. Timing is frame based: a 15 second loop is 450 frames, and most templates expose their beat count and durations as constants at the top of the file.

If you change durations, keep the composition’s durationInFrames in src/Root.tsx consistent so loops still close.

Updates and support

New templates and refinements land in the repository; pull from upstream in your fork to pick them up. Changes are listed in the changelog.

Questions about the templates go through support. Questions about Remotion itself (rendering, deployment, Lambda, the API) are best answered by the Remotion docs and their Discord.

Use of the templates is covered by the Lexington Themes license.