Start free
Section

Code snippet

The code snippet section has 2 layouts to choose from, and ships in 4 templates. Add it to any page from the editor and it takes on your site's type, colour and spacing, on every screen size.

What you do, how you work, what it looks like. The body of the page.

Layouts
2
In templates
4
Plan
All plans

Rendered live

Real output from the engine that serves every published Pendro site, using content from the templates that ship this section.

windowas it ships in Motion SaaS
Skip to content
Marlow & Sons

Marlow & Sons

03The export

What the engineer merges

CheckoutTotal.tsxtsx
import { motion } from 'framer-motion';
import { tokens } from '@/motion/tokens';

export function CheckoutTotal({ amount }: { amount: number }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 8 }}
      animate={{ opacity: 1, y: 0 }}
      transition={tokens.enter.soft}   // 320ms, ease-out-quart
    >
      <Amount value={amount} spring={tokens.spring.settle} />
    </motion.div>
  );
}

Generated from the timeline above. Tokens resolve from the same file the design system reads.

See it in a template

4 templates already include it. Open one to see it in context.

More telling your story sections

Start a site with itBrowse every section
Free to start

Live tonight.
Booked by the weekend.

Your site, bookings, leads and email, running in an evening, for free. The first customer who finds you pays for the rest.

Start freeSee pricing