Lexington Motion. Remotion video templates for social, websites, promo films, trailers, typography, charts, testimonials, app showcases, logo stings, intros, outros, maps, transitions, countdowns, code demos and lower thirds

What Lexington Motion is

Lexington Motion is a pack of 296 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. It comes in fourteen groups, all at 30 fps:

• Social: ten categories of 15 second seamless loops at 1080x1350 (4:5 portrait) for Instagram, LinkedIn, X and product launch posts. Grid, Carousel, Spin, 3D, Static, Typography, Marquee, Stack, Zoom and Tiles.
• Web: twenty landscape loops at 1920x1080 for hero and background video. Web templates.
• Promo: twenty-one 18 second cinematic films at 1920x1080. Not loops: one continuous 3D camera move each, with a headline mid-film and your wordmark on the end card. Promo templates.
• Trailers: twelve 18 second cinematic trailers at 1920x1080 for launches, drops, films and campaigns. Each one a different style, built around your photographs and a handful of lines. Trailer templates.
• Type: twenty 18 second typography films at 1920x1080 for launches, campaigns, features and announcements. No images at all: your lines and three colours, each film a completely different style with its own display face. Typography films.
• Charts: eighty animated data charts in eleven categories. Seventy are 1920x1080 and ten seconds; the ten KPI cards are 1080x1350 and eight seconds, one big number with a label and a delta. No images; your numbers go in as props. Area, Bars, Funnels, Heat maps, KPI, Lines, Numbers, Pie, Radar, Radial and Scatter.
• Testimonials: seven animated customer quote templates at 1080x1350, 15 seconds each, in light mode. A pull quote with photo, a full-bleed card, stacked story cards, a coloured split, a statement with picture chips between the words, and square photo cards sliding through a row or a column. Quotes, names, roles, photos and colours go in as props; the format prop gives 1:1, 9:16 and 4:3. Testimonial templates.
• App: eleven app showcase templates at 1080x1350, 15 seconds each. Your screenshots sit on the same phone-shaped cards as the social loops, no device frames to fight, and ride a wheel, whip along a rail, flip end over end, turn in a wave, fan out in depth, fly past the camera, assemble from deep space, flip as blinds, slide in a row, peel off a stack or stream in parallax lanes. Screenshots and colours go in as props; the format prop gives 1:1, 9:16 and 4:3. App showcase templates.
• Logo: ten logo sting templates at 1920x1080, three and a half seconds each, made to sit at the front or back of any video. Dots bloom into letters, glass shards slam into the word, blobs melt into type, letters bounce in on springs, echoes trail behind, a ring collapses into a full stop, a lens swallows the frame, a drum unrolls, pixels gather into a mark, bands scramble. Each has its own display face; your brand name (or a logo image that replaces it), tagline and colours go in as props, and the format prop gives 1:1, 4:5 and 9:16. Logo sting templates.
• Edit: everything you cut a video together with, at 1920x1080, in three categories:
  • Intros: ten intro and title card templates at 1920x1080, five seconds each, one per kind of show. A documentary slate with hard title wipes, a podcast episode card with a giant number, an interview split with the guest’s photo, a vlog shutter that cuts your first frame into strips, word hits for tutorials, a Figma-style selection box for tech, a tonal food world with a ribbon road, a cinematic sport open that drives the camera through the show name, bouncing letters for kids and a morphing brand blob. Each has its own face; your title, show name, episode and images go in as props, and the format prop gives 1:1, 4:5 and 9:16. Intro templates.
  • Transitions: ten scene transitions at 1920x1080, three seconds each as demos, and each one is a real @remotion/transitions presentation you can drop between your own scenes in a TransitionSeries. Five graphic two beat cuts in flat colour (stripes, dots, a chevron, blocks, a wave) and five elegant image cuts: tiles for lookbooks, panes for architecture, a drawn frame for editorial, a linen veil for interiors and cinema letterbox bars for travel. Scenes take a colour, an image or a clip; colours go in as props. Transition templates.
  • Outros: ten end card and sign-off templates at 1920x1080, eight seconds each. Cinematic next-video choices, minimal black and white credits, a podcast preview, a playful thank-you, a cursor-driven subscribe interaction, a type-only product launch, a graphic event ticket, a textured newsletter envelope, a spinning record and a textless orbital ending. Copy, colours and images go in as props where the design needs them; the format prop gives 1:1, 4:5 and 9:16. Outro templates.
• Maps: five animated map templates at 1920x1080, eight seconds each, on real map data. A dark satellite world with glowing routes from one hub to ten cities, a watercolor address reveal with a dropped pin, a two tone sea route drawn live with a follow camera, a flat street map with delivery zones around a depot, and a globe in space that dives onto a country and draws its border. Coordinates, copy and colours go in as props; renders need --gl=angle --concurrency=1 because the maps draw with WebGL. Map templates.
• Countdown: ten countdown templates at 1080x1350, 15 seconds each, for sales, launches, drops and events. Four are ticking clocks that start from the days, hours, minutes and seconds you set and tick one second per second of video: candy cards with rolling digits, a draining ring, a minimal black clock, and the time written out as a sentence. Six count to zero and hand over to your headline: a two-colour ident, a slamming number, retro posters, a halftone dot matrix, a scrolling column and a strobing club flyer. A rendered file cannot know the real time, so set the starting value close to when you post and re-render when it drifts. Copy and colours go in as props; the format prop gives 1:1, 4:3, 16:9 and 9:16. Countdown templates.
• Code: five code and terminal demo templates at 1920x1080, eight seconds each, for developer tools, SDKs, CLIs and platforms. Each is a different surface: a full-bleed phosphor terminal typing an install command, a light editor that animates a diff and commits it, an API request wired to a giant status code and cascading JSON, a dark editor walkthrough whose camera follows the highlighted lines with a wired annotation, and a CI pipeline with a rolling build log. The only monospace type in the pack, and only inside the code. Commands, code, steps, logs and colours go in as props; the diff is computed from your before and after; the format prop gives 1:1, 4:5 and 9:16. Code demo templates.
• Lower thirds: ten 8 second overlays at 1920x1080 for talking-head video. Name plates, a hairline rule, a social chip, karaoke and subtitle captions, word tiles, a title card, stacked rows, a crawling tape and a news bar. Light mode; your name, role, colours and a still from your footage go in as props. Lower third templates.

Every template shares one design system (canvas, card, type, spacing) so a set of renders looks like it came from the same brand, and you can restyle the social, web and promo templates from a single file. Trailers and Type films carry their own ground and type per style; charts share one palette in src/shared/chart.ts.

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"]
}

Guidance:

• Landscape 16:10 screenshots read best. By default images fill the card and are cropped from the bottom, so the top of a page is always visible.
• Templates cycle through however many images you provide. Some Web and Promo templates note an image count that “closes the loop”; fewer images simply repeat.
• Promo films want 12 to 16 images to fill every slot. Promo-16 adds a lines prop for its messages alongside images, and Promo-17 is type only and takes lines instead.
• With images left empty, templates render neutral numbered placeholder cards. That is what the preview videos on this site show.
• Tiles templates slice one image into cells. If your screenshots carry built-in padding, raise imageZoom (for example 1.2) until only real pixels remain.

Text props

Typography, Promo, Trailer and Type templates take text instead of, or as well as, images.

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. The samples are analytics for a fictional product so you can see what each chart does.

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. The repository README lists every chart with its exact props.

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

Output formats

Social, Testimonials and App templates are designed at 4:5 (1080x1350) and take a format prop for other ratios: "4:5", "1:1" (1080x1080), "9:16" (1080x1920) or "4:3" (1080x810). Set it in the Studio props panel or on the command line:

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

The design is fitted to the canvas width: squarer formats crop the top and bottom, 9:16 adds canvas above and below for story safe areas. Motion and timing are unchanged, so loops still close. For 16:9, use the Web templates, which are designed for it.

Chart templates are designed at 16:9 (1920x1080) and take the same prop for "16:9", "1:1", "4:5" or "9:16". Tall formats keep the chart at full width in the middle of the frame, so a bar chart or a KPI card drops straight into a Reel or a Story.

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

Rendering happens on your machine through a headless browser. A 15 second social loop takes one to three minutes depending on the template and your CPU; Promo films with motion blur take longer, and a ten second chart well under a minute.

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. Compress with a higher CRF for the web; a 15 second 1080p loop of flat cards is typically under 1 MB.

Restyling the whole pack

Design tokens live in src/shared/theme.ts. Each is a named preset (canvas colour, card fill, ink, corner radius, gap, image padding and fit); ACTIVE picks the one every template renders with. The pack comes with a flat warm neutral look and a dark graded card look, and adding your own is copying a preset and changing values. Card fills accept any CSS background, including gradients.

Because every template reads the same tokens, changing them once restyles every social, web and promo template. Charts read their palette from src/shared/chart.ts in the same way: five grey steps, one accent colour and a heat ramp. This is the intended way to match your brand; you rarely need to touch a template file.

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, usually split into six beats of 75. Most templates expose their beat count and move 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.