The newsletter form with the at sign that draws itself

Forms, SVG, TextGSAP, CSS onlyMediumCompressed weight: Demo 5.6 KBGSAP 28 KBFreeDownload the zip

In the minimal style, on white: the newsletter sign-up of a small letter press, an email field on a hairline and a Subscribe pill. Next to the field a large at sign waits as a pale ghost and, as you type, draws itself with a single line: the characters before the @ trace the inner bowl, the domain the long tail that wraps around it, always a moment behind you. A real address closes the tail in vermilion; Subscribe turns the at sign once on itself and the thank you arrives in place of the address, letter by letter. A wrong address unwinds the tail a little and the at sign shakes no.

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The newsletter form with the at sign that draws itself</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the newsletter sign-up of a small letter press, on white. While you type the address a large at sign draws
         itself with one thin line: the name before the @ draws the inner bowl, the domain draws the long tail around it.
         A real address closes the line in vermilion; Subscribe spins it once and the field becomes the thank you -->
    <form class="panel" data-panel novalidate>
      <p class="brand" data-brand></p>
      <h1 class="title" data-title></h1>
      <p class="sub" data-sub></p>

      <div class="row" data-row>
        <span class="mark" aria-hidden="true" data-mark>
          <svg viewBox="0 0 48 48" class="mark__svg">
            <path class="mark__ghost" d="M31 24 A7 7 0 1 1 17 24 A7 7 0 1 1 31 24 Z" />
            <path class="mark__ghost" d="M31 17 L31 28 C31 32.5 37.5 32.5 39 27 C41.5 16.5 34 7.5 24 7.5 C14.8 7.5 7.5 14.8 7.5 24 C7.5 33.2 14.8 40.5 24 40.5 C28 40.5 31.5 39.2 34.5 37" />
            <path class="mark__ink" data-bowl d="M31 24 A7 7 0 1 1 17 24 A7 7 0 1 1 31 24 Z" />
            <path class="mark__ink" data-tail d="M31 17 L31 28 C31 32.5 37.5 32.5 39 27 C41.5 16.5 34 7.5 24 7.5 C14.8 7.5 7.5 14.8 7.5 24 C7.5 33.2 14.8 40.5 24 40.5 C28 40.5 31.5 39.2 34.5 37" />
          </svg>
        </span>
        <label class="field" data-field>
          <span class="visually-hidden">Email address</span>
          <input class="field__input" data-input type="email" inputmode="email" autocomplete="email" spellcheck="false" placeholder="you@example.com">
          <span class="field__line" aria-hidden="true"><span class="field__fill" data-fill></span></span>
        </label>
        <div class="done" data-done aria-hidden="true">
          <p class="done__title" data-done-title></p>
          <p class="done__sub" data-done-sub></p>
        </div>
      </div>

      <button class="go" type="submit" data-go><span class="go__bg" aria-hidden="true"></span><span class="go__text" data-go-text></span></button>

      <p class="note" data-note aria-live="polite"></p>

    </form>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Playground

Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.

20 values to change

Open the Playground

Or ask Claude Code for it

With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:

Take “The newsletter form with the at sign that draws itself” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On white, in a narrow column: the small name of the letter press, Larkhill Press, the title The Sunday letter and a grey line; below, on the left, a large at sign drawn only as a pale ghost and, next to it, the email field on a hairline, then the black Subscribe pill. Typing the address inks the at sign over with a line one and a half pixels wide: every character before the @ draws a piece of the inner bowl, the @ closes it, every character of the domain lengthens the tail that wraps around; the line always arrives a moment later, like a pen catching up, and the field’s hairline fills with it. When the address is real the tail closes, the line and the hairline turn vermilion and the at sign swings a few degrees and settles. Subscribe turns it once on itself, the address rises away and You’re on the list. arrives in its place letter by letter, with its line underneath; after a few seconds the form comes back empty. An address without a domain writes the error in vermilion, the tail unwinds a little and comes back, the at sign shakes side to side. The pill widens its word on the wdth axis on hover and gives when pressed. In the preview a pretend hand types ada@larkhill, tries, finishes the address and subscribes.

How it works

An at sign in two strokes

The at sign is an SVG with two paths: the bowl, a circle, and the tail, which runs down the stem, turns right and wraps around. Underneath, the same two paths in very light grey make the ghost; on top, the inked ones have a stroke-dasharray equal to their length, measured with getTotalLength, and appear as the stroke-dashoffset goes down.

Characters draw

At every keystroke the script counts the characters before the @, worth the bowl up to LOCAL_LEN, and those of the domain, worth the tail up to 90%; only a real address takes it to 100%. GSAP chases those numbers in DRAW seconds with power3.out, so the line always arrives a moment after the finger.

Closed, right, wrong

When the address becomes real the colour of the line and of the hairline turns vermilion and the at sign starts from minus 9 degrees and settles with elastic.out. If the address is wrong the tail runs back by 38% and then recovers, the at sign shakes on keyframes and the error appears underneath.

The thank you

Subscribe turns the at sign 360 degrees in SPIN seconds with power3.inOut, the address rises 10 pixels and fades, and in its place the letters of the thank you, split one by one, rise 12 pixels from a small rotation with back.out(2.2), 25 thousandths apart.

Accessible

It is a real form with the email input, a hidden label and an aria-live line for the error. The preview’s pretend hand stops as soon as you really touch or type. With reduced motion the line draws without lagging and the thank you fades in.

Values to change

Name	File	Default	What it changes
`BRAND`	script.js	`Larkhill Press`	The small name of the letter press over the title.
`TITLE`	script.js	`The Sunday letter`	The title of the form.
`SUB`	script.js	`One short letter a week, no noise.`	The line under the title.
`BUTTON`	script.js	`Subscribe`	The text of the pill.
`DONE_TITLE`	script.js	`You’re on the list.`	The thank you once subscribed.
`DONE_SUB`	script.js	`The first letter comes on Sunday.`	The line under the thank you.
`ERROR`	script.js	`That address needs a domain.`	The error under the field.
`LOCAL_LEN`	script.js	`6`	How many characters before the @ draw the whole bowl.
`DOMAIN_LEN`	script.js	`9`	How many characters of the domain draw most of the tail.
`DRAW`	script.js	`0.55`	The seconds the line takes to catch up with what you type.
`SPIN`	script.js	`0.95`	The seconds of the at sign’s turn when you subscribe.
`RESET`	script.js	`3.4`	The seconds before the form comes back empty.

Try them in the Playground

When to use it

For the newsletter sign-up of a magazine, a letter press, a blog or a shop: a single field, with a gesture that says «you are writing an address» without one more icon.

On phones

The column narrows to 16 pixels from the edges and the at sign, the title and the field are measured on the screen height too, so the form fits whole in the short box. The field has inputmode email, so the phone keyboard shows the @.

With reduced motion

The line draws without lagging and the at sign neither turns nor shakes; the thank you fades in.

Pitfalls

The length of the paths must be measured with getTotalLength and used for both the dasharray and the offset: with a guessed number the line stops halfway or shows all at once.
The line must arrive after the finger, not with it: without the DRAW seconds of lag every keystroke jumps and the pen is lost.
The subscribe turn is 360 degrees and then the rotation goes back to 0 with no tween, otherwise next time the at sign turns the other way.

Libraries

GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 5.6 KB; the libraries: GSAP 28 KB.

Testing

Tested on 24 October 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: To do

License

Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.