Webflow Motion,

engineered for attention.

WebGL backgrounds, text motion, live data visuals and interface details, packaged as copy-paste embeds.
Drop one into your page, publish, and watch people stay.

Browse the effects
View on GitHub
Webflow Free Library

What is Dopamine FX?

We work the geometry, the light, the materials, the weight of a surface until the product reads as real. The kind of real that makes someone slow down, look closer, and want it before they know why. This is the level we build at, on every frame we ship.

Install

Three steps, all inside Webflow.

Every effect is driven by data-dfx attributes, so you keep styling elements in the Designer exactly as you do today.

  1. Paste the script

    Use the full bundle for all 22 effects, or copy only the effects you need from their cards. Either goes in Page settings → Before </body> or an Embed.

    filedopamine-fx.min.jssize48 KB, all 22

  2. Add the attributes

    Select an element, open Settings → Custom attributes. Copy each name and value from the tiles below.

    Namedata-dfxValuetilt

  3. Tune and publish

    Extra attributes set colours, speed and strength. Leave them out and the defaults look finished.

    Namedata-dfx-maxValue14
The code

Use the whole pack, or one effect at a time.

The full bundle below runs all 22 effects from one script: paste it once and every effect on the site is ready. Only need one or two? Each card further down has its own standalone snippet, so you load only what you use. You can mix both: an effect loaded twice still runs once.

Full bundle · dopamine-fx.min.js 49,522 characters
The pack

22 effects. All running on this page.

Hover the tiles. Every card has its standalone code, so you can paste that effect on its own without the full bundle, followed by the exact attributes it uses: the button on the right copies a whole line, and clicking a name or a value copies just that part for Webflow’s two fields.

Mesh Gradient
WebGL

Mesh Gradient

Four drifting colour points with soft warp and film grain. The Stripe-style hero, without the hero-sized bundle.

Put it on a Section or Div. The gradient renders behind the element’s children.

Standalone code3,568 / 50,000
Custom attributes
  • =""
    Required. Turns the effect on.
  • =""
    4 hex colours, comma separated · default #ff2e63,#ffb400,#5b2bff,#08d9d6
  • =""
    animation speed
  • =""
    film grain, 0 to switch off
  • =""
    how much the colour field bends
Aurora
WebGL

Aurora

Three transparent light curtains over the background you already set. Renders at half resolution, so it stays light on laptops.

Works best on a dark Section. Set the Section’s overflow to hidden.

Standalone code3,587 / 50,000
Custom attributes
  • =""
    Required. Turns the effect on.
  • =""
    3 hex colours
  • =""
    brightness
  • =""
    vertical position, 0 bottom to 1 top
  • =""
    softness in px
  • =""
    animation speed
Lightfall
WebGL

Lightfall

Thin streaks of light falling down the section, each column at its own pace. Transparent, so your background shows through.

Best on dark Sections. The streaks render behind the element’s children.

Standalone code3,405 / 50,000
Custom attributes
  • =""
    Required. Turns the effect on.
  • =""
    head colour, tail colour · default #ffffff,#7aa2ff
  • =""
    columns per screen height
  • =""
    share of columns that fall, 0 to 1
  • =""
    brightness
  • =""
    fall speed
Particle Field
Canvas · move here

Particle Field

A drifting constellation that reacts to the cursor. Density scales with the section size, capped for mobile.

Put it on any Section or Div with a background colour.

Standalone code2,764 / 50,000
Custom attributes
  • =""
    Required. Turns the effect on.
  • =""
    dot and line colour · default #ffffff
  • =""
    particle count multiplier
  • =""
    max line distance in px
  • =""
    repel, attract or none
  • =""
    max dot size in px
  • =""
    drift speed
Dot Grid
Canvas · move here

Dot Grid

A quiet dot matrix that swells and lights up around the cursor. Draws nothing while the cursor is away.

Put it on a Section or card. Pair it with a dark or light background.

Standalone code2,219 / 50,000
Custom attributes
  • =""
    Required. Turns the effect on.
  • =""
    space between dots in px
  • =""
    dot radius in px
  • =""
    resting dot colour · default rgba(255,255,255,.28)
  • =""
    colour near the cursor · default #ffffff
  • =""
    cursor reach in px
  • =""
    how far dots move away
Wave Lines
Canvas

Wave Lines

A ribbon of fine lines flowing across the section, blending between two colours. The ribbon follows the cursor height.

Put it on a Section. Lines render behind the content.

Standalone code2,370 / 50,000
Custom attributes
  • =""
    Required. Turns the effect on.
  • =""
    first line, last line · default #ff5fa2,#7aa2ff
  • =""
    number of lines, max 80
  • =""
    wave height
  • =""
    line width in px
  • =""
    flow speed
Film Grain
Canvas

Film Grain

Animated analogue grain over any section, or the whole site when placed on Body. Six noise frames are generated once and reused.

Put it on a Section, or on Body for a site-wide overlay.

Standalone code1,707 / 50,000
Custom attributes
  • =""
    Required. Turns the effect on.
  • =""
    grain strength · default 0.08
  • =""
    any CSS blend mode
  • =""
    frame rate, film is 12 to 24
  • =""
    grain size in px
  • =""
    z-index of the overlay
Canvas · drag me

Dot Globe

A rotating dotted globe with pulsing markers and arcs between them. Drag to spin. No map files, no libraries.

Put it on an empty Div with a fixed height or aspect ratio.

Standalone code3,355 / 50,000
Custom attributes
  • =""
    Required. Turns the effect on.
  • =""
    lat,lon pairs separated by ; · default Rome, New York, London, Tokyo, Sydney
  • =""
    dot colour · default #ffffff
  • =""
    markers and arcs
  • =""
    number of dots, max 4000
  • =""
    axis tilt in degrees
  • =""
    rotation speed
  • =""
    text for screen readers · default Rotating globe
Hover to decodeDOM

Text Scramble

Headings decode on scroll, on hover or on load. Links inside the text keep their markup, and screen readers get the real text.

Use on headings and short text.

Standalone code1,534 / 50,000
Custom attributes
  • =""
    Required. Turns the effect on.
  • =""
    view, hover or load · default view
  • =""
    seconds
  • =""
    characters used while scrambling · default symbols, A–Z, 0–9
Every word earns its entranceDOM

Split Reveal

Words or letters rise into place from behind a mask as the heading enters the view. The GSAP SplitText look, in 1.7 KB.

Use on headings. Links and spans inside keep their styling.

Standalone code1,887 / 50,000
Custom attributes
  • =""
    Required. Turns the effect on.
  • =""
    word or char
  • =""
    seconds between pieces · default 0.06 (char: 0.02)
  • =""
    seconds per piece
  • =""
    start offset, any CSS length
  • =""
    seconds before starting
  • =""
    view or load
DesignSVG filter

Gooey Text

Words melt into each other with a liquid blur. Good for rotating a list of services or audiences in a hero line.

Use on a heading or a span inside one. Inherits your font and colour.

Standalone code2,115 / 50,000
Custom attributes
  • =""
    Required. Turns the effect on.
  • =""
    comma-separated words · default the element text
  • =""
    morph time in seconds
  • =""
    seconds each word stays

We build landing pages

DOM

Typewriter free

Types, pauses, deletes and moves to the next word, with a blinking caret in your text colour.

Use on a span inside a heading for “We build ___” lines.

Standalone code1,788 / 50,000
Custom attributes
  • =""
    Required. Turns the effect on.
  • =""
    comma-separated words · default the element text
  • =""
    ms per character
  • =""
    ms per character
  • =""
    seconds before deleting
  • =""
    false stops on the last word
  • =""
    false hides the caret
DOM · get close

Magnetic

Buttons lean toward the cursor, with the label moving a little further for depth. Switched off on touch screens.

Put it on a Button or Link Block. Its first child moves for the depth effect.

Standalone code1,535 / 50,000
Custom attributes
  • =""
    Required. Turns the effect on.
  • =""
    how far it follows · default 0.35
  • =""
    extra px around it that still attracts
  • =""
    false keeps the label still
MEMBER CARD · Nº 0042Tilt + Glareperspective 900px
DOM

Tilt + Glare free

3D tilt with a light sheen that tracks the cursor. Use it on pricing cards, product shots and team photos.

Put it on any card, image wrapper or Link Block.

Standalone code1,848 / 50,000
Custom attributes
  • =""
    Required. Turns the effect on.
  • =""
    max rotation in degrees · default 10
  • =""
    scale on hover
  • =""
    glare opacity, 0 to switch off · default 0.25
  • =""
    perspective in px
WebflowCertified Partner
3D / WebGLInteractive
AIIntegration
DOM

Spotlight Border

Cards light up from inside and their borders glow as the cursor approaches, so neighbouring cards react together.

Add it to every card in a grid.

Standalone code2,456 / 50,000
Custom attributes
  • =""
    Required. Turns the effect on.
  • =""
    inner light
  • =""
    border glow · default rgba(255,255,255,.75)
  • =""
    border width in px
  • =""
    light size in px
  • =""
    px from the card where the glow starts
NEWBorder BeamDraws the eye to one card.
CSS

Border Beam

A comet of light that runs around the border of a card or button, with a soft glow. Pure CSS once it starts.

Put it on a card or button with a border radius.

Standalone code1,895 / 50,000
Custom attributes
  • =""
    Required. Turns the effect on.
  • =""
    head colour, tail colour
  • =""
    seconds per lap
  • =""
    beam length in degrees
  • =""
    border width in px
  • =""
    glow blur in px, 0 to switch off
Case study
DOM · move here

Custom Cursor

A dot and a trailing ring that grows over links and can show a label like “View” or “Drag”. Off on touch devices.

Put it on Body for the whole site, or on one Section to scope it.

Standalone code2,652 / 50,000
Custom attributes
  • =""
    Required. Turns the effect on.
  • =""
    dot and ring colour · default #ffffff
  • =""
    ring size in px
  • =""
    label colour · default #000
  • =""
    difference inverts what’s behind
  • =""
    true hides the system cursor · default false
  • =""child
    on a link inside: label shown in the ring
Abstract poster used to demo the ripple effect
WebGL · hover me

Ripple Image

Liquid ripple and chromatic split that follow the cursor. Works on any Webflow Image, respects object-fit, and falls back to the plain image.

Put it on an Image, or on a Div that contains one.

Standalone code4,018 / 50,000
Custom attributes
  • =""
    Required. Turns the effect on.
  • =""
    ripple strength
  • =""
    RGB split, 0 to switch off
  • =""
    size of the affected area
Image Trail
DOM · move fast

Image Trail

Move the cursor and a trail of images pops up behind it. The portfolio-hero effect, driven by the images you place inside.

Put it on a Section and place the trail images inside it.

Standalone code1,964 / 50,000
Custom attributes
  • =""
    Required. Turns the effect on.
  • =""
    px of movement between images · default 90
  • =""
    image width · default 180px
  • =""
    seconds each image stays
  • =""
    random rotation in degrees
depthscroll✳
DOM · scroll the page

Parallax

Layers drift at different speeds as the page scrolls. Measured from the parent, so it never jitters, and it can zoom images to hide edges.

Put it on an image or element inside a wrapper with overflow hidden.

Standalone code1,266 / 50,000
Custom attributes
  • =""
    Required. Turns the effect on.
  • =""
    negative moves the other way · default 0.3
  • =""
    y or x
  • =""optional
    scale images to hide their edges · default none
$1,250,000ARR, en-US
98.6%decimals kept
12.480+it-IT
DOM

Number Ticker free

Counts up when scrolled into view. Reads prefix, suffix, decimals and locale from the text you typed, so CMS fields just work.

Type the final number as normal text, e.g. $1,250+ or 98.6%.

Standalone code1,565 / 50,000
Custom attributes
  • =""
    Required. Turns the effect on.
  • =""
    start value
  • =""
    seconds
  • =""
    seconds, for staggering
  • =""optional
    force a locale, e.g. de-DE · default auto
  • =""optional
    force a number of decimals · default auto
  • =""
    false removes thousands separators
Webflow-native ✳ Zero dependencies ✳ Reduced-motion aware ✳ Pauses off-screen ✳
DOM

Infinite Marquee

Seamless loop that fills any width, pauses on hover and speeds up while the page scrolls. Clones are hidden from screen readers and keyboard focus.

Put it on a Div whose children are the items to scroll.

Standalone code1,964 / 50,000
Custom attributes
  • =""
    Required. Turns the effect on.
  • =""
    px per second · default 60
  • =""
    left or right
  • =""
    space between items
  • =""
    pause on hover
  • =""
    speed up while scrolling · default false
Which Webflow plan do I need?

Any plan that allows custom code, which means a paid Site plan or a Workspace plan. Effects run in Preview mode and on the published site.

How do I paste an attribute into Webflow?

Webflow has a separate Name and Value field. Click the name in a tile to copy it, paste it into Name, then click the value and paste it into Value. The copy button on the right copies the full name="value" line, handy for Embeds and code.

Will this slow my site down?

Each effect is between 1 and 4.1 KB, loads no libraries, and stops rendering when it scrolls out of view. WebGL effects cap pixel density so a 4K screen does not do 4K work.

Does it work with the CMS and Interactions?

Yes. Attributes can sit on Collection items and on elements that also use Webflow Interactions. After loading items dynamically, call DopamineFX["tilt"]() to pick up new ones.

What about accessibility?

Every effect checks prefers-reduced-motion and either stays still or shows the final state. Decorative canvases are hidden from screen readers, animated text keeps an accessible label, and cloned marquee items can’t be tabbed into.

Can I use it on client projects?

Yes, on unlimited client sites. You can’t resell the effects as a standalone product or include the source in a template you sell.

Contact Us
Rocket Icon
Start a Project
ABOUT DOPAMINEEFFECTS

We craft the wanting. We build the pull.
We make brands impossible to walk past.
Nothing here is left to chance, and no detail goes unconsidered. We arrive with a point of view and the nerve to stand behind it, because conviction is what exceptional work costs.

Webflow Certified Partner BadgeWebflow Certified PartnerWebflow Certified Partner BadgeWebflow Certified Partner
D
pamine.