code

Tags for showing code. This page is a short tutorial built with them: each step types itself in as you reach it.

Add motion to a page in four steps

Install the package

One package, no peer dependencies to wire up. Run it in your project folder.

<motion-code> types itself once when it scrolls into view, with a copy button

Show the codeHide the code

<script type="module">
  import "motion-components/motion-code";
</script>

<motion-code filename="terminal" code-lang="sh" typing typing-loop="false" typing-speed="55" copy>
  <script type="text/plain">
    npm install motion-components
  </script>
</motion-code>

Import the tags you use

Each tag has its own import, so the bundle only carries what the page renders.

<motion-code> highlights JavaScript from the file name

Show the codeHide the code

<script type="module">
  import "motion-components/motion-code";
</script>

<motion-code filename="main.js" typing typing-loop="false" typing-speed="55" copy>
  <script type="text/plain">
    import 'motion-components/motion-press'
    import 'motion-components/motion-reveal'
  </script>
</motion-code>

Wrap your HTML

Put the tag around the element that should move. The button keeps its own markup and styles.

<motion-code> highlights HTML

Show the codeHide the code

<script type="module">
  import "motion-components/motion-code";
</script>

<motion-code filename="index.html" typing typing-loop="false" typing-speed="55" copy>
  <script type="text/plain">
    <motion-press>
      <button class="buy">Add to cart</button>
    </motion-press>
  </script>
</motion-code>

Tune it with attributes

Attributes set the spring. A deeper press and more bounce make the same button feel softer.

<motion-code> the same block, tuned

Show the codeHide the code

<script type="module">
  import "motion-components/motion-code";
</script>

<motion-code filename="index.html" typing typing-loop="false" typing-speed="55" copy>
  <script type="text/plain">
    <motion-press scale="0.86" bounce="0.7">
      <button class="buy">Add to cart</button>
    </motion-press>
  </script>
</motion-code>

Everything else a code block can do

<motion-code> types, holds and starts again

Show the codeHide the code

<script type="module">
  import "motion-components/motion-code";
</script>

<motion-code filename="hero.html" typing typing-speed="40" typing-hold="2">
  <script type="text/plain">
    <motion-headline by="words">
      Motion that feels physical
    </motion-headline>
  </script>
</motion-code>

<motion-code> without the window chrome

Show the codeHide the code

<script type="module">
  import "motion-components/motion-code";
</script>

<motion-code hide-chrome>
  <script type="text/plain">
    .card {
      --mc-spotlight-color: rgb(250 204 21 / 0.25);
      border-radius: 1rem;
    }
  </script>
</motion-code>

<motion-code> compact, with a labelled copy button

Show the codeHide the code

<script type="module">
  import "motion-components/motion-code";
</script>

<motion-code filename="theme.css" compact copy copy-label>
  <script type="text/plain">
    :root {
      --mc-color-accent: #2563eb;
      --mc-color-yellow: #a16207;
    }
  </script>
</motion-code>

<motion-code> highlights JSON

Show the codeHide the code

<script type="module">
  import "motion-components/motion-code";
</script>

<motion-code filename="package.json" compact>
  <script type="text/plain">
    {
      "dependencies": {
        "motion-components": "^1.2.0"
      }
    }
  </script>
</motion-code>

<motion-code> highlights Python

Show the codeHide the code

<script type="module">
  import "motion-components/motion-code";
</script>

<motion-code filename="build.py" compact>
  <script type="text/plain">
    for page in pages:
        render(page, theme="dark")
  </script>
</motion-code>

<motion-code> sets its language with code-lang and its colours with --mc-code-* properties

Show the codeHide the code

<script type="module">
  import "motion-components/motion-code";
</script>

<motion-code filename="settings" code-lang="js" compact style="--mc-code-keyword: #f472b6; --mc-code-string: #4ade80; --mc-code-num: #facc15">
  <script type="text/plain">
    const spring = { stiffness: 320, damping: 24 }
    export default { theme: "dark", spring }
  </script>
</motion-code>

Code inside a sentence

Install with npm install motion-components, then wrap any button in motion-press and set scale="0.9" for a deeper press. Colours come from --mc-color-accent.

<motion-code-inline> the install command always shows its copy button, motion-press shows it on hover or focus, the rest have none

Show the codeHide the code

<script type="module">
  import "motion-components/motion-code-inline";
</script>

<p>
  Install with <motion-code-inline copy-visible>npm install motion-components</motion-code-inline>,
  then wrap any button in <motion-code-inline copy>motion-press</motion-code-inline>
  and set <motion-code-inline>scale="0.9"</motion-code-inline> for a deeper press.
</p>