A tiny script with a very loose grip on the pen.

Make words feel a little more alive.

How it works

Add a target. Pick a dood—or let the runtime pick one. Doods finds the words, wraps them without flattening your inline markup, and scales the original sketch to fit.

doods-target="alive"

Text-aware

CMS-ready

Reversible

Color-variable friendly

The basic move

Point at copy. Doods handles the markup.

LIVE HTML 640 × AUTO

We Deliver HVAC Solutions
That Fuel Ambition

The target can live inside a child element. Its original emphasis, capitalization, and surrounding layout remain intact.

doods-target Fuel

Live playground

Change the attributes, not the layout.

Every control below writes the same bare custom attributes you will add in Webflow.

Preview sentence

doods-target

doods-match

doods-dood

doods-color

doods-delay (seconds)

doods-position

doods-style

Quick color

RESULT Waiting for runtime

Good ideas become loud ideas when you mark them up.

The marks

A small drawer full of gestures.

Name one explicitly with doods-dood. The auto system uses circles for compact words and three underline shapes for wider phrases.

Sketch calibration

Nudge every mark into place.

Tune each sketch against live, multi-line type. Your values stay attached to each sketch while you switch between them.

A line of type above.
Adjust this sketch by eye.
A line of type below.

ADJUSTMENT DESK 0 / 13 changed

Sketch Horizontal offset 0px Vertical offset 0px Width 100% Height 100%

SHAREABLE JSON Ready to copy

Stack the idea

More than one mark? Number the whole family.

Keep the first set unnumbered. Then append -2, -3, and so on to every companion attribute. Gaps are fine; the scanner discovers every target independently.

Draw under this
and around that.

doods-target-2="around"

Attribute reference

Six attributes. Plain HTML.

Attribute What it controls Default

doods-target

Literal word or phrase to find in descendant text.

required

doods-match

first, last, all, or a one-based index.

first

doods-dood

Sketch name. Leave blank or use auto for a smart fit.

auto

doods-color

Any CSS color, including var(--your-color).

currentColor

doods-delay

Reveal delay in seconds. Use 0 for no delay.

0.15

doods-style

Extra inline CSS declarations applied directly to the SVG.

blank

Static-host ready

Ship small. Draw on demand.

<script defer src="https://doods.nvm.work/doods.iife.js"></script>

The production build also includes an ES module at doods.nvm.work/doods.es.js. Both bundles are dependency-free; each optimized SVG is fetched only if the page selects it.