Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Subtle animated backgrounds for web pages v1.0.0

Use this resource to add a subtle animated background behind page content

New

  • 485 downloads
  • 113 likes
  • 189 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install animated-web-backgrounds

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent picks the lightest technique that fits (CSS gradient, GLSL shader with Three.js or canvas particles), writes it with complete code and makes it loop seamlessly. It honors the reduced motion preference and pauses the animation offscreen. You get a standalone HTML page whose background feels alive without hurting text readability.

Mostly picked by

Updated November 2, 2026

Animated mesh gradient background behind hero section text

Details

Works in
Install guides
Generates with
Your agent's model
Uses
  • Three.js (shader version only)
Licence
MIT

Similar resources

View all
  • Free

    Video

    App window with zoom

    • 365365 downloads
    • 125125 likes
    • 188188 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • Free

    Video

    One big number

    • 463463 downloads
    • 223223 likes
    • 100100 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • PRO

    Video

    Three bars head to head

    • 348348 downloads
    • 133133 likes
    • 182182 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • PRO

    Video

    Before / after slider

    • 322322 downloads
    • 248248 likes
    • 238238 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • PRO

    Video

    Three-card carousel

    • 418418 downloads
    • 157157 likes
    • 101101 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • PRO

    Video

    Chat exchange

    • 564564 downloads
    • 127127 likes
    • 161161 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • PRO

    Video

    Checklist ticking off

    • 442442 downloads
    • 233233 likes
    • 160160 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames

What you get

  • SKILL.md: approach choice, design rules, three techniques with code, seamless loops, gotchas
  • references/background-recipes.md: multi-blob mesh, Three.js aurora with parallax, optimized constellation field
  • Reduced-motion and offscreen-pause manager, plus a screenshot-based verification method

Good fit for

  • Bringing a landing page or hero section background to life
  • Creating an animated backdrop for a login page or an empty state
  • Replacing a heavy background video with a light CSS gradient

Not for

  • Producing a rendered background video as MP4
  • Building full interactive 3D scenes

Tags

  • background
  • gradient
  • shader
  • particles
  • css

About

You say

"Add a slowly moving purple and blue gradient background to my home page without hurting the headline's readability."

Animated mesh gradient background behind hero section text

Skill published by iart-ai under the MIT license.

Show more

Prerequisites

You bring
Your brand colors and The type of page or section to dress up
Dependencies
Three.js (shader version only)

How to use it

  1. Install the skill in your agent's skills folder.
  2. Describe the look you want (gradient, aurora, constellation) and your brand colors.
  3. Open the HTML file in a browser and check the text readability.

Content preview

Files

  • LICENSE1.1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • references/background-recipes.md8.9 KB
  • SKILL.md11.9 KB

Origin and licence

Modified by PalateKit

Author
iart-ai
Source
github.com/iart-ai/motion-design-skills/tree/3c129f769d90a1328c209c386492333c9ac62312/skills/motion-background
Licence
MIT

Notice

Version modifiée de « motion-background » (iart-ai, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Will the background slow the page down?

The skill caps render resolution at 2, pauses the animation offscreen and prefers CSS when a gradient is enough.

Do I need Three.js?

Only for the shader version, loaded from a CDN. The CSS and canvas versions have no dependency. The small helper scripts it mentions (scripts/) are not included and are optional.