> ## Documentation Index
> Fetch the complete documentation index at: https://captions.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Caption templates

> Browse the default Mirage caption template gallery with preview videos and template IDs you can pass to the video captions API for styled video captions.

You can also view these templates programatically with the [list template endpoint](https://help.mirage.app/api-reference/video-captions/list-caption-templates).

<CardGroup cols={2}>
  <Card title="Buzz">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/1FA3A381-5DDF-4ECD-936B-63D7CF16DEB0.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_yvE0ZnYzEj6ClCD2ee1f
    ```
  </Card>

  <Card title="Medusa">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/9035C498-6FEA-4A5B-A161-2065E5047E30.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_yNnJyDLSH5oIouKdjQx2
    ```
  </Card>

  <Card title="Cartwheel Black">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/47778C94-153B-4D7C-9E78-F8445D4D094B.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_xCFRVbYyA4OShvj3jPA8
    ```
  </Card>

  <Card title="Drive">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/8A06A96C-02A1-4212-8E15-A962CC3FD7E3.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_wR9PXfmxW1DFxEUuATFg
    ```
  </Card>

  <Card title="Magazine">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/0D20548E-05E2-4631-9C54-1DA5AEC39D27.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_vrs1M2VrxvzQWNRypRvh
    ```
  </Card>

  <Card title="Monster">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/D1FE3AF8-B905-4C63-9528-CDD507FC077D.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_tkuSt0SUnBuxNT6b2LNG
    ```
  </Card>

  <Card title="Dimidium">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/70B38469-7D53-468D-85DF-8AA42B203BC5.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_tWgDpYUXw4wyU7tB7eOG
    ```
  </Card>

  <Card title="Scene">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/8A074BB7-9CA9-4595-9CA3-5B644169103E.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_tN68l72WH2RFjl1eMhwg
    ```
  </Card>

  <Card title="Recess">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/2F6DE10E-188F-466D-882D-8CB352DDF580.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_slCGoQERGj5Dn9Cr1Whd
    ```
  </Card>

  <Card title="Pollux">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/EBBC74F6-7F76-441F-813C-0ADF184C9176.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_rn0HysnZUu5UzZEJw8gq
    ```
  </Card>

  <Card title="Vitamin C">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/1AC81755-82C9-4432-AB48-0DC93D5EF9FC.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_qdtwV5Vi2GbkQZ9THLcW
    ```
  </Card>

  <Card title="Altair">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/EA84DFE9-E595-4371-BF92-7FA567E09641.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_pwQ0QiBOYuuRvDuEYzmr
    ```
  </Card>

  <Card title="Aries">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/65ACE75F-1BC4-40FF-B622-4FA2EFA43B73.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_pUtOSPltDzsoYJgLBYmo
    ```
  </Card>

  <Card title="Energy">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/2EEEFFCD-F841-4BE4-94C6-9C1210C84203.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_oofP3mxbx8CaEPNYqnKD
    ```
  </Card>

  <Card title="Acamar">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/DAAA998B-EC41-4569-9FB0-38F229F19153.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_ojEuI2F9lnZ9u91YkYjo
    ```
  </Card>

  <Card title="Sirius">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/A3865035-498F-4A31-850D-467C0D7BA378.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_miZu2nLWyP7X8oEAAHcM
    ```
  </Card>

  <Card title="Helios">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/E7FE377A-01FE-410B-9B52-573E9AD1E8A5.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_lXEe3rYgxCKh2MnCymqC
    ```
  </Card>

  <Card title="Milky Way">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/18742EFF-A422-40E2-855C-34825FCE48E7.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_jcTmJGX77Uwz2AqLOX4S
    ```
  </Card>

  <Card title="Energy II">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/C18AABAB-2800-49A1-891C-5CAB45A4E404.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_iusqRnf5W08ENWPOVvkz
    ```
  </Card>

  <Card title="Finlay">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/9FE6D8A0-A013-4152-B1CB-13526FDD0A0F.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_iqX03uuwVIqPJOV4MGgr
    ```
  </Card>

  <Card title="Mizar">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/3A90F35C-FCDE-4441-BEAB-0046EBE48FFD.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_idIjDO4Mtwu9nquVB0OV
    ```
  </Card>

  <Card title="Note">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/2C3AD329-EBA0-4947-B931-EC5067C642F5.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_iV3lX880qcCe9AURc4XA
    ```
  </Card>

  <Card title="Neon">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/89832981-4551-437B-BEBC-FA9F261F8B41.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_hfkGwYGSIPHijM4vWRqH
    ```
  </Card>

  <Card title="Eclipse">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/12532E04-87FE-4755-88CA-9B199ADA7412.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_hVijUCESRcnAG1TqV8Bv
    ```
  </Card>

  <Card title="Baseline">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/4BB2543A-4B50-45AA-9F52-B3D10089126B.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_hQisXGK98sAN8E5M4g8h
    ```
  </Card>

  <Card title="Nova">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/C8B421E2-6E86-4BF5-9314-5798EB32C7BF.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_hMydc4rk9l4yC3Hw6MKK
    ```
  </Card>

  <Card title="Minima">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/BC84694F-C1ED-4564-8C69-94F7EBFC728E.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_grdfFHRFNm6sBARtdVRy
    ```
  </Card>

  <Card title="Marigold">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/2401C030-61F5-490E-85BD-E4BEBA04ED0F.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_fsR2Jc3zhDrsMEOPb9mo
    ```
  </Card>

  <Card title="Closed Cap">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/24168B5A-62D0-44EC-B796-9F16727EC712.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_fYTszWbhnFlgJp2cU4vI
    ```
  </Card>

  <Card title="Hustle v3">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/05287B42-FED9-4D2B-88CD-D4DAEB388AE6.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_epPY6aFemTA34RuDT9yv
    ```
  </Card>

  <Card title="Pacific">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/88FF55D6-D961-4489-A502-25F03F351E8E.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_bKvIxXSn2sZvmt7RbFV1
    ```
  </Card>

  <Card title="Pulse">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/4315D216-6473-4AE1-98CE-3D2248F94C72.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_ZLUhoYk5omnYGzcKY1aQ
    ```
  </Card>

  <Card title="Footprint v3">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/49EA4416-299C-4CB0-BB69-B4EB5266AE71.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_XZwWZdooFDLbmiZ524p5
    ```
  </Card>

  <Card title="Blueprint">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/9B5ED614-1397-4D07-95D2-064701A19F52.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_X20BklSG9zplCCfMrZJI
    ```
  </Card>

  <Card title="Messages">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/306F261C-42C5-4B3A-819A-6D4B6108EA56.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_UoxfGUNJyd21EOr8kClC
    ```
  </Card>

  <Card title="Betelgeuse">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/0F739EA7-80CB-49FE-B138-90D814517E6D.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_UK5Mjc782KB2qouPo709
    ```
  </Card>

  <Card title="Freshly">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/9DBDEBBC-C0B9-4969-9F29-50B278FEF122.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_SprKAix4SRgIUFwpxOZ1
    ```
  </Card>

  <Card title="Flair">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/5E751096-865C-4AAD-8778-749048262699.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_SP9YZolOKiJv8tJqMeYC
    ```
  </Card>

  <Card title="Alcyone">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/1CFD6965-FBF5-455F-8F53-8ABEAA64AC24.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_SHr4UDH7uqZPfXVYIlBC
    ```
  </Card>

  <Card title="Vitamin B">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/7DEBFE71-70CD-4ED0-8722-6CD13C273151.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_RbfrMonqCaUZbIWZGlG4
    ```
  </Card>

  <Card title="Glow">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/D1E7A509-EB12-45F8-BC21-120826E6F3EF.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_P1qdlnbSk4NZERdu6tIO
    ```
  </Card>

  <Card title="Runway">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/A0E4F2FD-5A47-4210-8A98-BFBE291696C9.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_NVTtZ8SY0Jo4UUFokB8p
    ```
  </Card>

  <Card title="Orbitar Black">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/752892A1-5A0D-495F-B5A0-66CD54AEA2B4.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_NCLdW43y7fggCYnS5miH
    ```
  </Card>

  <Card title="Doodle">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/993C9AD9-CF06-46B6-9085-9DC43E677002.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_NBpLQoUt2a6hRPdSD3Qp
    ```
  </Card>

  <Card title="Thuban">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/202757E5-6433-4179-99F2-42EE4E395C81.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_LWMH1tfwvAHpzq0LAK7V
    ```
  </Card>

  <Card title="Cygnus A">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/93486B1E-BF12-41FB-A47A-C70FAAC806E3.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_JtJChccdjhEQEC1wiQcn
    ```
  </Card>

  <Card title="Orion">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/063EA13B-5048-438E-8FBD-07FAAA762C2E.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_JJFaDOxMmHWj5B5qSklN
    ```
  </Card>

  <Card title="Lumin">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/7E837F34-F4FD-4A40-856A-4A6AA8B52AF1.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_J6YuQpoLwYlBVgSKTIrw
    ```
  </Card>

  <Card title="Linear">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/43CA63F4-F1AC-4E97-A499-4A67DF9EE686.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_Fy5WxiGPPAV393kth8mZ
    ```
  </Card>

  <Card title="Cove">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/06EB1482-E985-4117-B1A8-B61D23DA363F.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_FbiwB6xaJm9CQA3Ot4Tx
    ```
  </Card>

  <Card title="Heat">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/0021BB09-AEA4-4B3B-8E93-4FBFD63FB5D0.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_DxflLOnuKkb198FNdI9E
    ```
  </Card>

  <Card title="Arion Pink">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/51FC225E-4B42-4CF3-A053-F485B2120F56.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_Dujj8gkcMe6hoaptLWwU
    ```
  </Card>

  <Card title="Suzy">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/128152FF-FE67-48D2-90D4-D8A79A3CE6AB.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_DcsGeQFyiKLSqHAfC5fF
    ```
  </Card>

  <Card title="Chronicle">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/D9D38900-5208-49DE-BFC3-0E3BF0627FCF.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_Ck8XVyVLYN2YRzwzzwxm
    ```
  </Card>

  <Card title="Cartwheel Purple">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/4CB4742B-F65B-46F9-A306-8ABBBA09E9A9.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_Ce9huKC7BtvGK6tQcoXX
    ```
  </Card>

  <Card title="Castor">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/553FCE5E-36B9-4D1A-BCFE-8CE6E232894A.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_Av1JgOg6DoJlXJLwfFFm
    ```
  </Card>

  <Card title="Growth">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/C46A845F-059F-4CB1-869C-E213704FC848.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_A503B1LAyB7A4U2x84p7
    ```
  </Card>

  <Card title="Million">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/F4935BA4-6221-4244-9A38-DAC4830C0187.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_A1AMNbzmIat0CEiwrgfI
    ```
  </Card>

  <Card title="Daily Mail">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/117A9ECC-A7E3-4A69-B84E-E764AFB0CC3D.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_9YoEtziK8O9WvuWYzNZ7
    ```
  </Card>

  <Card title="Andromeda">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/49FF054E-8264-44A7-AAB9-75E3DB49C743.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_7uui8xzgcjbzVVl1WKaE
    ```
  </Card>

  <Card title="Zodiac">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/0416ADF5-4DE4-4D09-B901-873B7BFA9571.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_7ukpFvJbH1PplZLpCz8t
    ```
  </Card>

  <Card title="Poem">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/2EC84EB5-8FA0-4321-B036-FE2971C6055D.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_5RaXhC2spDHYw40DsgFF
    ```
  </Card>

  <Card title="Techwave">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/5B5ABDB9-2BEB-4163-BE1C-38755040694A.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_3PwgOIKd3tbOstKPPC4E
    ```
  </Card>

  <Card title="Alhena">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/D44A0015-E074-4651-A516-47D17BD6C4C0.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_3NY2lfJiFAULlIG2COz9
    ```
  </Card>

  <Card title="Script">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/D632A7E0-7994-4231-A6EE-5C99260AA4EC.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_2sOSSKWNXgQu3C5eE60l
    ```
  </Card>

  <Card title="Garnet">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/C9A1770D-DC57-456B-A824-48740BE027D3.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_2ryQmZz2Iq4XRX4F8pCU
    ```
  </Card>

  <Card title="Fuel">
    <div onMouseEnter={(e) => e.currentTarget.querySelector('video').play()} onMouseLeave={(e) => { const v = e.currentTarget.querySelector('video'); v.pause(); v.currentTime = 0.3; }}>
      <video loop muted playsInline preload="auto" src="https://captions-cdn.xyz/studio-assets/captions-style-previews/72BE26AD-72F7-4EED-AA10-F84C7EA2A547.mp4#t=0.3" />
    </div>

    **Template ID**

    ```
    ctpl_17zhen9AkxDAtWNL67ir
    ```
  </Card>
</CardGroup>
