Silk
Folds of fabric ripple slowly across a background, with a fine film grain.
- element
- webgl
- fabric
- ambient
- hero
- since 0.1
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
Silk example
Code
It follows the controls above: change an option and the code changes with it.
<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>
<axi0-silk cover color="#7b6cff"></axi0-silk>import { Silk } from "./motion/react/Silk";
<Silk /><script setup lang="ts">
import Silk from "./motion/vue/Silk.vue";
</script>
<template>
<Silk />
</template>const fx = document.createElement("axi0-silk");
document.querySelector("#hero").append(fx);The wrappers: Silk.tsx (React, TypeScript) and Silk.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
color | #7b6cff | the fabric's color |
speed | 1 | how fast the folds move |
scale | 1 | larger numbers make smaller folds |
rotation | 0 | turns the pattern, in degrees |
grain | 1 | film grain (0 turns it off) |
cover | false | fill the nearest positioned parent, behind its content |
Accessibility
The same runner as aurora: the loop stops off screen and in hidden tabs, reduced motion draws one still frame. It paints an opaque sheet, so put light text over it.
Size
silk.js is 0.7 KB gzip, with gl.js 2.1 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.