doods.

Attribute-driven marks for Webflow

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

Make words feel a little more 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.

Quick color
RESULT Waiting for runtime

Good ideas become loud ideas when you mark them up.

WEBFLOW ATTRIBUTES

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.

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

Five 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-style

Extra inline CSS declarations applied directly to the SVG.

blank

Static-host ready

Build once. Serve one file.

<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 and served globally from Cloudflare.