FooPixel FX
GitHub

v1.1.1 4 hover effects · 8 bursts · 7 colour schemes · 0 dependencies

Pixels that pop, shatter, sparkle, explode and rain.

A tiny JavaScript library of pixel hover effects and pixel bursts, made from the squares breaking off the FooPixel logo. Free, open source and about 10 KB.

Get it on GitHub ↗ Install in 10 seconds

Click anywhere on the page. Seriously, anywhere.

The FooPixel logo, a cloud shedding square pixels
NEW · BURSTS 7 NEON SCHEMES ~10 KB
Scroll for chaos

Hover effects

Hover everything.

Four effects for drop zones, cards and buttons. They start on hover, keyboard focus or a file dragged over, and stop completely when you leave. Try each one with a different colour scheme from the top bar.

Drag a file over a card, too. They notice.
breakawayA

Breakaway

Pixels break off every edge and step outward, shading across the gradient. The closest thing to the logo itself.

data-pixel-fx="breakaway"
uplinkB

Uplink

Pixels climb the sides, turn in to the upload icon and one escapes through the top. It tells the upload story.

data-pixel-fx="uplink"
ditherC

Dither

A hidden pixel grid lights up under your cursor and fades behind it. Move around in here and draw with it.

data-pixel-fx="dither"
traceD

Trace

Two pixel trails race around the border, shedding the odd pixel. It doubles as a loading state while an upload runs.

data-pixel-fx="trace"

Bursts

Eight ways to celebrate.

One-off pixel explosions you fire from a click, a finished upload or any moment worth marking. Smash the keys, or press 1 to 8 on your keyboard.

PixelFX.burst(button, { style: "burst" });

Bonus round

Hold to charge.

Press and hold. The longer you hold, the bigger it gets. Hold it for the full three seconds if you dare.

Colour schemes

Seven schemes. Or steal yours.

Hover a card to preview its scheme, click it to repaint the whole page, effects, bursts and all. Or drop in a photo and the page takes its colours from it.

Drop an image here or click to choose one. It stays in your browser and is never uploaded.

Current colours

#2e68ff → #35ceff


      

        
        
        
      

    

  







  

    
    
The Burst Machine

    
A drum machine that explodes.

    
Every row is a burst and an 8-bit sound. Every lit square fires on the beat. Press play, then paint your own pattern. Turn your volume down first.

  


  

    

      
      
124BPM

      
      
      

        
        
        
        
        
      

    

    

      

    

  







  

    
    
Mini game

    
Pixel Popper.

    
Thirty seconds. Pop the invaders before they get away. Chain your pops and the bursts get bigger: shockwaves, starbursts, then fireworks. Gold ones are worth ten.

  


  

    

      
Score000

      
Combox0

      
Time30

      
Best000

    

    

      
      

        
INSERT COIN

        
Pixel Popper

        
      

      
    

  







  

    
    
The Wall

    
96 buttons. No rules.

    
Every tile is a random effect in a random scheme. Sweep your cursor across them. Click one to send a ripple through the whole wall.

  

  

    
    
    
  

  







  

    
    
Playground

    
Build your own.

    
Mix any effect with any burst and any colours. The code underneath writes itself, ready to paste into your site.

  


  

    

      

        Hover effect
        

          
          
          
          
        

        

          
          
        

        
        
        
        
        
        
      

      

        Burst on click
        
        
        
        
        
      

    

    

      

        

        
Hover it. Click it.

      

      

        
        
        
      

      

    

  







  

    
    
Install

    
Ten seconds. No build step.

    
One script tag, then add attributes to your HTML. There's a JavaScript API and TypeScript types when you want more control.

  


  

    
10KB gzipped

    
0dependencies

    
4hover effects

    
8bursts

    
7colour schemes

    
MITlicence

  


  
    
    
  1. 
      1
      
    Add the script
    
      
    <script src="https://cdn.jsdelivr.net/gh/fooplugins/foopixel-fx@1/dist/foopixel-fx.min.js" defer></script>
    
      
    
    2. 
    
  2. 
      2
      
    Add an attribute
    
      
    <button data-pixel-fx="trace" data-pixel-preset="button">Hover me</button>
<button data-pixel-burst="confetti">Click me</button>
<div data-pixel-fx="uplink" data-pixel-scheme="synthwave">Drop files</div>
    
      
    
    3. 
    
  3. 
      3
      
    Or call it yourself
    
      
    PixelFX.burst(button, { style: "firework" });
PixelFX.configure({ scheme: "cyberpunk" });
PixelFX.get(dropZone).setActive(true); // while uploading
    
      
    
    4. 
  


  

    View on GitHub ↗
    Download the latest release
    Read the docs