blockanim 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 gc-guillaume
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,116 @@
+# blockAnim
+
+**v2.0** · ~2kb gzipped · MIT License
+
+## Animate any HTML element in one class.
+
+The simplest way to add scroll-triggered micro-interactions to your UI. No config, no JS to write — just add a class.
+
+---
+
+## 🆕 New in v2: Cascade
+
+**One class to rule them all.**
+
+Introducing **Cascade** — animate all children of an element sequentially with a single class. No more copy-pasting delays on every item.
+
+```html
+<ul class="blockanim-slide-up-100-cascade">
+  <li>Design</li>
+  <li>Animate</li>
+  <li>Ship</li>
+  <li>Repeat</li>
+</ul>
+```
+
+Works with `-repeat` too: `blockanim-slide-up-100-cascade-repeat`
+
+---
+
+## Why blockAnim?
+
+Everything you need, nothing you don't.
+
+| Feature | Description |
+|---------|-------------|
+| **⚡ Blazing Fast** | Only ~2kb gzipped. No dependencies, no bloat. Your page loads instantly while animations run buttery smooth at 60fps. |
+| **🎯 One Class** | Add a single class to any HTML element. That's it. No JavaScript to write, no configuration needed. |
+| **⏱️ Custom Delays** | Chain animations with custom delays in milliseconds. Create beautiful sequential reveals effortlessly. |
+| **🔄 Repeat Mode** | Animations replay every time elements scroll into view. Perfect for long pages and portfolios. |
+| **🎨 35+ Animations** | Slides, clips, fades, skews, diagonals, and more. A complete toolkit for modern web animations. |
+
+---
+
+## Get Started
+
+Up and running in seconds.
+
+### CDN (Recommended)
+
+The fastest way. Just copy these two lines into your HTML file:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gc-guillaume/blockanim-v2/blockanim.min.css">
+<script src="https://cdn.jsdelivr.net/gh/gc-guillaume/blockanim-v2/blockanim.min.js"></script>
+```
+
+### Download
+
+Get the source code and customize animations to your needs.
+
+---
+
+## Documentation
+
+### Simple, intuitive syntax.
+
+One class pattern to rule them all. Combine animation type, delay, and repeat mode.
+
+```
+blockanim-{animation}-{delay}-repeat
+```
+
+| Part | Required | Description |
+|------|----------|-------------|
+| `{animation}` | ✅ Yes | The animation type |
+| `{delay}` | ❌ Optional | Delay in ms |
+| `-repeat` | ❌ Optional | Repeat on scroll |
+
+### Examples
+
+| Class | Type | Description |
+|-------|------|-------------|
+| `blockanim-{animation}` | Required | The animation to apply. Choose from 35+ options. |
+| `blockanim-{anim}-{ms}` | Optional | Add a delay in milliseconds before the animation starts. |
+| `blockanim-{anim}-repeat` | Optional | Replay the animation each time the element enters the viewport. |
+| `blockanim-{anim}-{ms}-repeat` | Optional | Combine delay and repeat for full control. |
+
+```html
+<!-- Basic animation -->
+<div class="blockanim-slide-up">...</div>
+
+<!-- With delay -->
+<div class="blockanim-slide-up-400">...</div>
+
+<!-- With repeat -->
+<div class="blockanim-blur-in-repeat">...</div>
+
+<!-- Delay + repeat -->
+<div class="blockanim-clip-500-repeat">...</div>
+```
+
+---
+
+## License
+
+Open source under **MIT License**. Free for personal and commercial use.
+
+---
+
+## Author
+
+**Guillaume Coulin**
+
+Made with care on the Côte d'Azur.
+
+[Portfolio](https://guillaumecoulin.com) · [LinkedIn](https://linkedin.com/in/guillaumecoulin) · [Contact](mailto:contact@guillaumecoulin.com)

package/blockanim.min.css

@@ -0,0 +1 @@
+@keyframes shakeEffect{0%, 100%{transform:translateX(0)}25%, 75%{transform:translateX(-10px)}50%{transform:translateX(10px)}}@keyframes swingEffect{0%{transform:rotate(15deg)}50%{transform:rotate(-10deg)}100%{transform:rotate(0deg)}}[class*=blockanim]{transition:all .8s .08s cubic-bezier(.04, .79, .04, 1)}[class*=blockanim-]:not([class*=-cascade]){opacity:0}[class*=-cascade] > *{opacity:0}[class*=-cascade][class*=blockanim-]{clip-path:none !important;transform:none !important;opacity:1 !important;filter:none !important}[class*=blockanim-slide-up]{transform:translateY(50px)}[class*=blockanim-slide-down]{transform:translateY(-50px)}[class*=blockanim-slide-left]{transform:translateX(50px)}[class*=blockanim-slide-right]{transform:translateX(-50px)}[class*=blockanim-slide-up].blockanim-visible,[class*=blockanim-slide-down].blockanim-visible{opacity:1;transform:translateY(0)}[class*=blockanim-slide-left].blockanim-visible,[class*=blockanim-slide-right].blockanim-visible{opacity:1;transform:translateX(0)}[class*=blockanim-blur-in]{transform:translateY(0);filter:blur(10px)}[class*=blockanim-blur-in].blockanim-visible{opacity:1;filter:blur(0)}[class*=blockanim-scale-up]{transform:scale(.8)}[class*=blockanim-scale-down]{transform:scale(1.2)}[class*=blockanim-scale-up].blockanim-visible,[class*=blockanim-scale-down].blockanim-visible{opacity:1;transform:scale(1)}[class*=blockanim-rotate]{transform:rotate(-15deg)}[class*=blockanim-rotate].blockanim-visible{opacity:1;transform:rotate(0deg)}[class*=blockanim-clip]{position:relative;transform:translateY(50px);clip-path:inset(0 50%)}[class*=blockanim-clip].blockanim-visible{opacity:1;transform:translateY(0);clip-path:inset(0 0)}[class*=blockanim-clip-top]{transform:translateY(50px);clip-path:inset(50% 0 0 0)}[class*=blockanim-clip-bottom]{transform:translateY(-50px);clip-path:inset(0 0 50% 0)}[class*=blockanim-clip-right]{transform:translateX(-50px);clip-path:inset(0 0 0 50%)}[class*=blockanim-clip-left]{transform:translateX(50px);clip-path:inset(0 50% 0 0)}[class*=blockanim-clip-top].blockanim-visible,[class*=blockanim-clip-bottom].blockanim-visible{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)}[class*=blockanim-clip-left].blockanim-visible,[class*=blockanim-clip-right].blockanim-visible{opacity:1;transform:translateX(0);clip-path:inset(0 0 0 0)}[class*=blockanim-clip-diagonal-top-right]{transform:translate(-50px, 50px);clip-path:inset(50% 0 0 50%)}[class*=blockanim-clip-diagonal-top-left]{transform:translate(50px, 50px);clip-path:inset(50% 50% 0 0)}[class*=blockanim-clip-diagonal-bottom-left]{transform:translate(50px, -50px);clip-path:inset(0 50% 50% 0)}[class*=blockanim-clip-diagonal-bottom-right]{transform:translate(-50px, -50px);clip-path:inset(0 0 50% 50%)}[class*=blockanim-clip-diagonal-top-left].blockanim-visible,[class*=blockanim-clip-diagonal-top-right].blockanim-visible,[class*=blockanim-clip-diagonal-bottom-left].blockanim-visible,[class*=blockanim-clip-diagonal-bottom-right].blockanim-visible{opacity:1;transform:translate(0, 0);clip-path:inset(0 0 0 0)}clip-path:inset(0 0 0 0)}[class*=blockanim-center-blur]{transform:scale(.8);filter:blur(10px)}[class*=blockanim-center-blur].blockanim-visible{opacity:1;transform:scale(1);filter:blur(0)}[class*=blockanim-rotate-3d]{transform:rotateY(90deg)}[class*=blockanim-rotate-3d].blockanim-visible{opacity:1;transform:rotateY(0)}[class*=blockanim-jump]{transform:translateY(90px)}[class*=blockanim-jump].blockanim-visible{opacity:1;transform:translateY(0)}[class*=blockanim-stretch]{transform:scaleX(.3)}[class*=blockanim-stretch].blockanim-visible{opacity:1;transform:scaleX(1)}[class*=blockanim-diagonal]{transform:translate(-20px, 20px)}[class*=blockanim-diagonal-top-left]{transform:translate(-20px, -20px)}[class*=blockanim-diagonal-top-right]{transform:translate(20px, -20px)}[class*=blockanim-diagonal-bottom-left]{transform:translate(-20px, 20px)}[class*=blockanim-diagonal-bottom-right]{transform:translate(20px, 20px)}[class*=blockanim-diagonal].blockanim-visible,[class*=blockanim-diagonal-top-left].blockanim-visible,[class*=blockanim-diagonal-top-right].blockanim-visible,[class*=blockanim-diagonal-bottom-left].blockanim-visible,[class*=blockanim-diagonal-bottom-right].blockanim-visible{opacity:1;transform:translate(0, 0)}[class*=blockanim-skew]{transform:skewX(-40deg)}[class*=blockanim-skew].blockanim-visible{opacity:1;transform:skewX(0)}[class*=blockanim-zoom]{transform:scale(.5)}[class*=blockanim-zoom].blockanim-visible{opacity:1;transform:scale(1)}[class*=blockanim-flip]{transform:rotateX(90deg)}[class*=blockanim-flip].blockanim-visible{opacity:1;transform:rotateX(0)}[class*=blockanim-shake]{transform:translateX(-10px)}[class*=blockanim-shake].blockanim-visible{opacity:1;animation:shakeEffect .7s ease forwards}[class*=blockanim-blur-scale]{transform:scale(.8);filter:blur(10px)}[class*=blockanim-blur-scale].blockanim-visible{opacity:1;transform:scale(1);filter:blur(0)}[class*=blockanim-slide-rotate]{transform:translateX(-50px) rotate(-10deg)}[class*=blockanim-slide-rotate].blockanim-visible{opacity:1;transform:translateX(0) rotate(0)}[class*=blockanim-tilt]{transform:rotate(-10deg) scale(.9)}[class*=blockanim-tilt].blockanim-visible{opacity:1;transform:rotate(0deg) scale(1)}[class*=blockanim-compress]{transform:scaleY(.5)}[class*=blockanim-compress].blockanim-visible{opacity:1;transform:scaleY(1)}[class*=blockanim-swing]{transform:rotate(15deg)}[class*=blockanim-swing].blockanim-visible{opacity:1;animation:swingEffect .7s ease-in-out forwards}[class*=blockanim-unfold]{transform:scaleY(0);transform-origin:top}[class*=blockanim-unfold].blockanim-visible{opacity:1;transform:scaleY(1)}[class*=blockanim-roll]{transform:translateX(-70%) rotate(-30deg)}[class*=blockanim-roll].blockanim-visible{opacity:1;transform:translateX(0) rotate(0)}[class*=blockanim-fold]{transform:scaleX(0);transform-origin:left}[class*=blockanim-fold].blockanim-visible{opacity:1;transform:scaleX(1)}@media all and (max-width:768px){html body:not(header):has([class*=blockanim-]){contain:paint}}

package/blockanim.min.js

@@ -0,0 +1 @@
+document.addEventListener("DOMContentLoaded",function(){const e=/^blockanim(-\w+)*(-\d+)?(-repeat|-cascade)?(-repeat|-cascade)?$/,t=/-(\d+)(-repeat|-cascade)?(-repeat|-cascade)?$/,s=/-repeat/,a=/-cascade/,c=new WeakSet,i=s=>{const a=[...s].find(t=>e.test(t));if(!a)return 0;const c=a.match(t);return c?parseInt(c[1],10):0},n=e=>[...e].some(e=>s.test(e)),o=e=>[...e].some(e=>a.test(e)),r=(e,t=null)=>{const s=null!==t?t:i(e.classList);setTimeout(()=>{const t=e.getBoundingClientRect();t.top<window.innerHeight&&t.bottom>0&&e.classList.add("blockanim-visible")},s)},l=(t,s)=>{const a=i(t.classList),c=(t=>{const s=[...t].find(t=>e.test(t));return s?s.replace(/-\d+/g,"").replace(/-cascade/g,"").replace(/-repeat/g,""):null})(t.classList),o=n(t.classList),r=t.children;s?Array.from(r).forEach((e,t)=>{c&&!e.classList.contains(c)&&e.classList.add(c);setTimeout(()=>{e.classList.add("blockanim-visible")},a*t)}):o&&Array.from(r).forEach(e=>{e.classList.remove("blockanim-visible")})},d=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting?o(e.target.classList)?l(e.target,!0):r(e.target):o(e.target.classList)?n(e.target.classList)&&l(e.target,!1):n(e.target.classList)&&e.target.classList.remove("blockanim-visible")})},{rootMargin:"0px 0px -90px 0px"}),m=e=>{if(!c.has(e))if(c.add(e),d.observe(e),o(e.classList)){const t=e.getBoundingClientRect();t.top<window.innerHeight&&t.bottom>0&&l(e,!0)}else r(e)};document.querySelectorAll('[class*="blockanim"]').forEach(m),new MutationObserver(e=>{e.forEach(e=>{e.addedNodes.forEach(e=>{1===e.nodeType&&(e.matches?.('[class*="blockanim"]')&&m(e),e.querySelectorAll?.('[class*="blockanim"]').forEach(m))})})}).observe(document.body,{childList:!0,subtree:!0})});

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "blockanim",
+  "version": "2.0.0",
+  "description": "Animate any HTML element in one class. Scroll-triggered micro-interactions with zero config.",
+  "main": "blockanim.min.js",
+  "style": "blockanim.min.css",
+  "files": [
+    "blockanim.min.js",
+    "blockanim.min.css"
+  ],
+  "keywords": [
+    "animation",
+    "css",
+    "scroll",
+    "intersection-observer",
+    "micro-interactions",
+    "reveal",
+    "animate",
+    "lightweight",
+    "no-dependencies"
+  ],
+  "author": "Guillaume Coulin",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gc-guillaume/blockanim-v2.git"
+  },
+  "homepage": "https://blockanim.dev",
+  "bugs": {
+    "url": "https://github.com/gc-guillaume/blockanim-v2/issues"
+  }
+}