Motion Cookbook

Every effect you bookmarked, rebuilt in plain HTML.

Border beams, split-flap boards, dither shaders, dotted maps. 27 effects modelled on Magic UI, Aceternity UI and Cult UI, rewritten by hand with no React, no Tailwind and no Motion. Every tile below runs the exact code its Copy button hands you.

Browse the effects
  • 27live effects
  • 0dependencies
  • 2.4 kBmedian snippet
  • 8need no JavaScript
shine-border.htmlwhat Copy gives you

        
That is a whole effect. 31 lines, one paste, nothing to install.

      

    

  








  

    
    
    
  






  

    

    
Nothing by that name.Try "beam", "text" or "grid".

  









  

    How to use it
    
Copy, paste, tune. That is the whole workflow.

    

      
Copy
Press Copy on any tile. You get one block: a <style> tag, the markup and, when the effect needs it, a <script> tag.

      
Paste
Drop it into any HTML file, CMS embed or Claude artifact. Every rule is scoped to one .fx-name class, so two effects on the same page never fight.

      
Tune
Colours, speeds and sizes are plain CSS values and constants near the top of each block. Change a number, reload, done. Each block fills whatever box you put it in.

    

    

      
Credit where it is due. These are independent vanilla rebuilds. They are modelled on how the originals look and behave, and none of the original source is copied. If you work in React, use the real libraries. They are free, well kept and worth your star.

      

        Magic UI
        Aceternity UI
        Cult UI
        21st.dev