ASCII Magic
Open tool

Animated ASCII borders and dividers

An ASCII border, divider or line is the quickest way to give a page some structure, and every piece here moves. You will find rules of pulsing dots, a rolling wave, a twisted rope, a heartbeat trace and a circuit strip, plus full frames like the Neon Border, the Double Line Frame and a Marching Ants selection box.

12 pieces

View use cases
Circuit TraceRules & Frames
Pulsing Dot RuleRules & Frames
Double Line FrameRules & Frames
Heartbeat RuleRules & Frames
Marching Ants FrameRules & Frames
Neon BorderRules & Frames
Pulse LineRules & Frames
Twisted RopeRules & Frames
Ribbon BannerRules & Frames
Twinkle Star BandRules & Frames
Wave DividerRules & Frames
Zigzag RuleRules & Frames

Where to start

Each one is hand-coded in box-drawing and block symbols, so it stays crisp at any size and weighs only a few KB. Drop a divider between sections with one embed tag, export a GIF for a README, or pause on a frame and use Copy as text to paste a still ASCII separator into a code comment or a terminal banner.

Neon BorderA rounded neon tube that slides from pink to cyan, made to sit around a hero headline on a dark page.Double Line FrameA classic double-line box with comets of gold and blue light chasing round it, ideal for a callout or a code sample.Wave DividerTwo soft sine waves drifting from blue to pink to orange, a calm section break for almost any layout.Marching Ants FrameA selection frame with dashes marching clockwise, a natural fit for design tools and editors.Circuit TraceCopper traces with green and blue signals racing along them, a divider that tells readers the page is about tech.Heartbeat RuleAn ECG trace swept across the page with a heart that beats on every spike, perfect for health or uptime pages.

Where to place ASCII dividers and borders in a layout

Dividers work best where a reader needs a pause: between the sections of a long landing page, under a heading, above a footer or between steps in a README. Keep to one style per page so the rhythm feels planned rather than busy. Frames do a different job. They hold something, so put them around a hero headline, a pricing callout or a code sample you want people to notice.

  • Calm pages and docs: Pulsing Dot Rule or Wave Divider between sections.
  • Developer tools and dashboards: Circuit Trace or Pulse Line under a heading.
  • Health, fitness and status pages: Heartbeat Rule as a section break.
  • Night themes and launch pages: Twinkle Star Band above the footer.
  • Headlines and announcements: Neon Border, Double Line Frame or Ribbon Banner around the key line.
  • Nautical, craft or outdoor brands: Twisted Rope between sections.

Sizing an ASCII line so it fits every screen

The dividers in this set are 90 to 96 columns wide and only 3 to 7 rows tall, so they read as a thin band rather than a picture. The size attribute on the embed tag sets the size of each symbol in pixels, which scales the whole rule up or down. A smaller size keeps a long ASCII line on one row on a phone, and a larger one turns it into a bold band across a wide hero.

The embedded piece never grows wider than its container, so test it at phone width and lower the size if the ends get cut off. Because a piece only animates while it is on screen, dividers further down a long page do no work until a reader scrolls to them, and visitors who prefer reduced motion see a still rule.

Plain text ASCII borders: box-drawing symbols vs pure ASCII

Strictly speaking, ASCII has only a handful of symbols for lines: the hyphen, the equals sign, the vertical bar, the plus sign and the asterisk. A pure ASCII border looks like +------+ with a | on each side, and it works everywhere, including old terminals and plain text email.

The frames here use Unicode box-drawing symbols such as ─ │ ┌ ┐ ╭ and ╮, which give smoother corners and heavy or double lines. They display correctly in any modern monospace font. To get one as text, open a piece, pause it on a frame you like and press Copy as text. Paste it inside a Markdown code block or a code comment so the spacing holds and the corners line up.

Matching animated frames to your colors

Each piece ships with its own palette, but you can bend it toward a brand. Add the mono attribute to draw the piece in a single color that follows your CSS text color, set bg to give it a solid background, or switch the look to Halftone dots, Blocks or Lines for a different texture. On the piece page, the dark and light toggle shows how a divider reads on both backgrounds before you commit.

For places where scripts cannot run, such as a slide, a video edit, a README or a social banner, export the loop as a GIF or an MP4 video, or save a single frame as a PNG at one of the preset sizes.

Ways to use ASCII rules & frames

Step-by-step guides with a live builder and code to copy.

All 18 use cases →
README

Animated ASCII art for a GitHub README

Put an animated ASCII banner, scene or loader at the top of your GitHub README. Copy a GIF or SVG, no build step, works in GitHub's dark and light themes.

Docs

ASCII art for docs sites and landing pages

Add animated ASCII art to docs and landing pages built with Next.js, Astro, Docusaurus or plain HTML. Diagrams, terminals and heroes that load instantly.

Code

ASCII art headers for source code comments

Copy ASCII art and block-letter banners as text for file headers and section comments in your code.

Email

ASCII art GIFs for newsletters and email

Export animated ASCII art as a GIF for newsletters and email, where scripts and video do not play.

/FAQS

ASCII rules & frames: frequently asked questions

Answers about using ASCII rules & frames on websites, in READMEs, in terminals and in exports.

Q. What is an ASCII border?
An ASCII border is a frame drawn with text symbols, such as dashes, bars and corner marks, around a block of text or a section of a page. Classic versions use only + - | and =, while modern ones use Unicode box-drawing symbols for clean corners. The borders in this library are animated, with light running around the edge.
Q. How do I add an animated ASCII border to my website?
Paste the ascii.js script tag once, then place an ascii-art element with the piece name where the border should appear. For example, <ascii-art piece="neon-border"><ASCII library-art> adds the Neon Border. It plays only while on screen and holds a still frame for visitors who prefer reduced motion.
Q. Can I copy an ASCII border as plain text?
Yes. Open any frame, pause on the moment you like and press Copy as text to copy that frame as plain text. Paste it inside a Markdown code block, a code comment or a terminal, where a monospace font keeps the corners lined up.
Q. How do I add an ASCII line divider to a GitHub README?
Use a GIF, because GitHub does not run scripts in a README. Download the GIF from a divider such as Wave Divider or Pulse Line, commit it to your repository and reference it with an img tag set to the width of your content. The README tab on each piece page writes the snippet for you.
Q. What symbols make a good ASCII separator?
A plain ASCII separator uses a row of hyphens, equals signs, asterisks or tildes, like ======== or --------. Box-drawing symbols such as ─ and ═ give a smoother line, but they are Unicode rather than ASCII. Animated separators like the Pulsing Dot Rule add soft pulses of light on top of the line.
Q. Is there an ASCII frame I can put around a heading?
Yes, the Neon Border, Double Line Frame, Marching Ants Frame and Ribbon Banner are all built to sit around a title or callout. Embed the frame and position your heading over its empty middle with CSS, or export the frame as a PNG and use it as a background image.
Q. Will an animated divider slow down my page?
An animated divider adds very little weight, because each piece is only a few KB and only animates while it is on screen. Dividers further down a long page do no work until the reader scrolls to them, and visitors who ask their system to reduce motion see a still frame instead.
Q. How do I change the color of an ASCII art border?
Add the mono attribute to the embed tag and the border is drawn in one color that follows the CSS text color of its container. You can also set bg for a solid background, or switch the look to Halftone dots, Blocks or Lines for a different texture while keeping the motion.
Q. How wide is an animated ASCII divider, and can it fit on a phone?
The dividers are 90 to 96 columns wide, and the size attribute scales them to fit. Size sets the symbol size in pixels, so a smaller value narrows the whole rule. The element never grows past its container, so check it at phone width and lower the size if the ends are cut off.
Q. Can I use ASCII dividers on a client or commercial website?
Yes, every piece is MIT licensed for personal and commercial use. You can embed, export or adapt a divider for a client site, a product page or a template you sell. Credit is appreciated but not required.
Q. Can I use an ASCII border in an email newsletter?
Yes, export it as a GIF, because email apps do not run scripts. A thin divider such as Twinkle Star Band or Zigzag Rule makes a light section break between stories. Size the GIF to the width of your email column and give it short alt text.
Q. Can I print an ASCII line in the terminal?
Yes, every divider plays in a terminal with npx --yes https://www.ascii-magic.com/ascii/cli.tgz followed by the piece name, for example npx --yes https://www.ascii-magic.com/ascii/cli.tgz wave-divider. Add --frame to print one still frame, which works well as a separator in a script's output or a shell welcome message.

Related categories

All categories