> ## Documentation Index
> Fetch the complete documentation index at: /llms.txt
> Use this file to discover all available pages before exploring further.
# Neon Border
> Two arcs of light travel the edge of a rounded panel and snap corner to corner, trailing a soft three-layer bloom. A lower third for a name and role.
# Neon Border
Two arcs of light travel the edge of a rounded panel and snap corner to corner, trailing a soft three-layer bloom. A lower third for a name and role.
**Neon Border**
```html lt-neon-border.html theme={null}
Dr. Maya ChenHost · Neuroscientist
```
Copy npx hyperframes add lt-neon-border to the clipboard
That writes one file: `compositions/lt-neon-border.html`.
## Add it to your video
It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
```html index.html theme={null}
```
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes.md) for the rest.
## Change how it looks
Set these CSS variables on the block:
* `undefined` — Name. Defaults to `Dr. Maya Chen`.
* `undefined` — Role. Defaults to `Host · Neuroscientist`.
* `undefined` — Accent. Defaults to `#cc9149`.
* `undefined` — Movement. Defaults to `step`. Options: `step`, `glide`.
* `undefined` — Speed. Defaults to `1.6`.
* `undefined` — Corner radius. Defaults to `26`.
* `undefined` — Thickness. Defaults to `5`.
* `undefined` — Arc length. Defaults to `22`.
* `undefined` — Glow. Defaults to `1`.
## Variables
Every one of these has a default, so the piece works untouched. Set the ones you
want to change on the element:
| Variable | Default | Accepts | What it does |
| - | - | - | - |
| `name` | `Dr. Maya Chen` | string | |
| `role` | `Host · Neuroscientist` | string | |
| `accent` | `#cc9149` | color | |
| `movement` | `step` | `step`, `glide` | |
| `speed` | `1.6` | 0.2corners/s to 6corners/s, step 0.1corners/s | |
| `cornerRadius` | `26` | 0px to 90px, step 1px | |
| `thickness` | `5` | 1px to 16px, step 1px | |
| `arcLength` | `22` | 5% to 100%, step 1% | |
| `glow` | `1` | 0x to 2x, step 0.05x | |
Set them with `data-variable-values` on the element that mounts it. These are the
defaults, so this behaves exactly like the preview above until you change one:
```html wrap theme={null}
```
Tagged `lower-third` `glow` `loop` `video-primitive`.
## Related topics
* [Browse the complete Catalog](/catalog.md)
* [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks.md)
* [Put blocks together into one video](/concepts/compositions.md)
## Related topics
- [Neon Glow](/catalog/components/caption-neon-glow.md)
- [Neon Accent](/catalog/components/caption-neon-accent.md)
- [Text, captions and code on screen](/prompting/captions-catalog.md)
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.