Lab · Library

flux.js

Five effects in one 4 KB script.

Install

One script tag. GSAP loads itself if it’s missing.

flux.min.js flux.js (readable)

4 KB gzipped, MIT licence

index.html
<script src="https://www.max-schleining.de/flux/flux.min.js" defer></script>

<h1 data-flux="reveal">Line by line</h1>

Effects

  • data-flux="reveal"

    Lines slide up out of a mask as they scroll into view.

    data-flux-duration="1.1"

  • data-flux="proximity"

    Variable-font letters thin and narrow near the pointer.

    data-flux-radius="360" · data-flux-weight="200,800" · data-flux-width="75,100"

  • data-flux="scramble"

    The text decodes itself on hover.

    data-flux-chars="upperCase"

  • data-flux="marquee"

    An endless row that speeds up and leans with your scroll.

    data-flux-speed="0.6" · data-flux-direction="right"

  • data-flux="riso"

    The three-ink riso shader on a canvas, following the pointer.

    data-flux-colors="#f1efe8,#0e0e0e,#ff3b1f" · data-flux-scale · data-flux-grain

People who asked their system for less motion get reveal, proximity and marquee switched off. Text stays readable either way.

Try it

Every line gets its own mask and its own moment.

Flux

  • Hover me
  • And me
  • Me too
Reveal ✶ Proximity ✶ Scramble ✶ Marquee ✶ Riso ✶ 

JavaScript

Content that arrives later, a bundler, a framework: start and stop it yourself.

Flux
app.html
<script src="https://www.max-schleining.de/flux/flux.min.js" data-flux-manual></script>
<script>
  // Bring your own GSAP (optional): Flux.use({ gsap, ScrollTrigger, SplitText, ScrambleTextPlugin })
  Flux.init(document.querySelector('#app'))   // start everything inside #app
  Flux.destroy(document.querySelector('#app')) // stop it and restore the markup
</script>