remarqueeble 0.2.0 → 0.3.0

package/dist/remarqueeble.mjs

@@ -1,4 +1,4 @@
-/*! remarqueeble v0.2.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
+/*! remarqueeble v0.3.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
 //#region src/lib/remarqueeble.ts
 var DEFAULT_DIRECTION = "left";
 var DEFAULT_BEHAVIOR = "scroll";
@@ -23,6 +23,15 @@ var CSS_VAR_HEIGHT = "--attr-height";
 var CSS_VAR_HSPACE = "--attr-hspace";
 var CSS_VAR_VSPACE = "--attr-vspace";
 var CSS_VAR_BG_COLOR = "--attr-bgcolor";
+var CSS_VAR_ANIMATION_DURATION = "--animation-duration";
+var CSS_VAR_ANIMATION_DIRECTION = "--animation-direction";
+var CSS_VAR_ANIMATION_ITERATION_COUNT = "--animation-iteration-count";
+var CSS_VAR_ANIMATION_PLAY_STATE = "--animation-play-state";
+var CSS_VAR_ANIMATION_TIMING_FUNCTION = "--animation-timing-function";
+var CSS_VAR_TRANSLATE_X_END = "--translate-x-end";
+var CSS_VAR_TRANSLATE_X_START = "--translate-x-start";
+var CSS_VAR_TRANSLATE_Y_END = "--translate-y-end";
+var CSS_VAR_TRANSLATE_Y_START = "--translate-y-start";
 var HTMLElementBase = globalThis.HTMLElement ?? class {};
 var parsePresentationalDimension = (value) => {
 	if (value === null) return null;
@@ -83,11 +92,6 @@ var RemarqueebleElement = class extends HTMLElementBase {
 	];
 	track;
 	running = false;
-	position = 0;
-	lastTime = null;
-	loopsDone = 0;
-	forward = true;
-	rafId = null;
 	constructor() {
 		super();
 		const shadowRoot = this.attachShadow({ mode: "open" });
@@ -112,9 +116,32 @@ var RemarqueebleElement = class extends HTMLElementBase {
 				}
 
 				.track {
+					animation: remarqueeble-motion
+						var(${CSS_VAR_ANIMATION_DURATION}, 10s)
+						var(${CSS_VAR_ANIMATION_TIMING_FUNCTION}, linear)
+						var(${CSS_VAR_ANIMATION_ITERATION_COUNT}, infinite)
+						var(${CSS_VAR_ANIMATION_DIRECTION}, normal)
+						both;
+					animation-play-state: var(${CSS_VAR_ANIMATION_PLAY_STATE}, running);
 					display: inline-block;
 					will-change: transform;
 				}
+
+				@keyframes remarqueeble-motion {
+					from {
+						transform: translate(
+							var(${CSS_VAR_TRANSLATE_X_START}, 100%),
+							var(${CSS_VAR_TRANSLATE_Y_START}, 0px)
+						);
+					}
+
+					to {
+						transform: translate(
+							var(${CSS_VAR_TRANSLATE_X_END}, -100%),
+							var(${CSS_VAR_TRANSLATE_Y_END}, 0px)
+						);
+					}
+				}
 			</style>
 
 			<span class="track"><slot></slot></span>
@@ -122,6 +149,7 @@ var RemarqueebleElement = class extends HTMLElementBase {
 		const track = shadowRoot.querySelector(".track");
 		if (!track) throw new Error("Remarqueeble track element was not created.");
 		this.track = track;
+		this.track.addEventListener("animationend", () => this.handleAnimationEnd());
 	}
 	connectedCallback() {
 		this.running = true;
@@ -129,16 +157,10 @@ var RemarqueebleElement = class extends HTMLElementBase {
 		requestAnimationFrame(() => {
 			if (!this.isConnected || !this.running) return;
 			this.reset();
-			this.tick();
 		});
 	}
 	disconnectedCallback() {
 		this.running = false;
-		this.lastTime = null;
-		if (this.rafId !== null) {
-			cancelAnimationFrame(this.rafId);
-			this.rafId = null;
-		}
 	}
 	attributeChangedCallback(_name, oldValue, newValue) {
 		if (oldValue === newValue) return;
@@ -176,18 +198,16 @@ var RemarqueebleElement = class extends HTMLElementBase {
 	start() {
 		if (this.running) return;
 		this.running = true;
-		this.lastTime = null;
-		this.tick();
+		this.reset();
+		this.syncAnimationPlayState();
 	}
 	stop() {
 		this.running = false;
-		if (this.rafId !== null) {
-			cancelAnimationFrame(this.rafId);
-			this.rafId = null;
-		}
+		this.syncAnimationPlayState();
 	}
 	syncPresentationalHints() {
 		for (const hint of ATTRIBUTE_HINTS) this.syncVar(hint);
+		this.syncAnimationPlayState();
 	}
 	syncVar(hint) {
 		const raw = this.getAttribute(hint.attribute);
@@ -203,10 +223,7 @@ var RemarqueebleElement = class extends HTMLElementBase {
 	reset() {
 		const hostSize = this.getHostSize();
 		const trackSize = this.getTrackSize();
-		this.loopsDone = 0;
-		this.forward = true;
-		this.position = this.behavior === "alternate" ? this.getAlternateStartPosition(hostSize, trackSize) : this.getStartPosition(hostSize, trackSize);
-		this.render();
+		this.syncAnimation(hostSize, trackSize);
 	}
 	getHostSize() {
 		return this.isVerticalDirection ? this.clientHeight : this.clientWidth;
@@ -229,69 +246,53 @@ var RemarqueebleElement = class extends HTMLElementBase {
 	getAlternateStartPosition(hostSize, trackSize) {
 		return this.directionSign < 0 ? hostSize - trackSize : 0;
 	}
-	tick(time = performance.now()) {
-		if (!this.running) return;
-		if (this.lastTime === null) this.lastTime = time;
-		if (time - this.lastTime >= this.scrollDelay) {
-			this.step();
-			this.lastTime = time;
-		}
-		if (!this.running) return;
-		this.rafId = requestAnimationFrame((nextTime) => this.tick(nextTime));
+	syncAnimationPlayState() {
+		this.style.setProperty(CSS_VAR_ANIMATION_PLAY_STATE, this.running ? "running" : "paused");
 	}
-	step() {
-		const hostSize = this.getHostSize();
-		const trackSize = this.getTrackSize();
-		const startPosition = this.getStartPosition(hostSize, trackSize);
-		const flushEndPosition = this.getFlushEndPosition(hostSize, trackSize);
-		const offEndPosition = this.getOffEndPosition(hostSize, trackSize);
-		const slideEndPosition = this.getSlideEndPosition(hostSize, trackSize);
-		const alternateStartPosition = this.getAlternateStartPosition(hostSize, trackSize);
-		const amount = this.scrollAmount;
-		const delta = this.directionSign * amount;
-		if (this.behavior === "alternate") {
-			this.position += this.forward ? delta : -delta;
-			if (this.forward) {
-				if (this.directionSign < 0 && this.position <= flushEndPosition || this.directionSign > 0 && this.position >= flushEndPosition) {
-					this.position = flushEndPosition;
-					this.forward = false;
-					this.incrementLoopCount();
-					if (this.shouldStopAfterLoop()) this.stop();
-				}
-			} else if (this.directionSign < 0 && this.position >= alternateStartPosition || this.directionSign > 0 && this.position <= alternateStartPosition) {
-				this.position = alternateStartPosition;
-				this.forward = true;
-				this.incrementLoopCount();
-				if (this.shouldStopAfterLoop()) this.stop();
-			}
-		} else if (this.behavior === "slide") {
-			this.position += delta;
-			if (this.directionSign < 0 && this.position <= slideEndPosition || this.directionSign > 0 && this.position >= slideEndPosition) {
-				this.position = slideEndPosition;
-				this.incrementLoopCount();
-				if (!this.hasAttribute(ATTR_LOOP) || this.loop <= 0) this.stop();
-				else if (this.shouldStopAfterLoop()) this.stop();
-				else this.position = startPosition;
-			}
+	syncAnimation(hostSize, trackSize) {
+		const startPosition = this.behavior === "alternate" ? this.getAlternateStartPosition(hostSize, trackSize) : this.getStartPosition(hostSize, trackSize);
+		const endPosition = this.behavior === "slide" ? this.getSlideEndPosition(hostSize, trackSize) : this.behavior === "alternate" ? this.getFlushEndPosition(hostSize, trackSize) : this.getOffEndPosition(hostSize, trackSize);
+		const distance = Math.abs(endPosition - startPosition);
+		const steps = Math.max(1, Math.ceil(distance / Math.max(1, this.scrollAmount)));
+		const duration = Math.max(1, steps * this.scrollDelay);
+		const iterationCount = this.getCssIterationCount();
+		this.track.style.removeProperty("transform");
+		this.style.setProperty(CSS_VAR_ANIMATION_DURATION, `${duration}ms`);
+		this.style.setProperty(CSS_VAR_ANIMATION_DIRECTION, this.behavior === "alternate" ? "alternate" : "normal");
+		this.style.setProperty(CSS_VAR_ANIMATION_ITERATION_COUNT, iterationCount);
+		this.style.setProperty(CSS_VAR_ANIMATION_TIMING_FUNCTION, `steps(${steps}, end)`);
+		if (this.isVerticalDirection) {
+			this.style.setProperty(CSS_VAR_TRANSLATE_X_START, "0px");
+			this.style.setProperty(CSS_VAR_TRANSLATE_X_END, "0px");
+			this.style.setProperty(CSS_VAR_TRANSLATE_Y_START, `${startPosition}px`);
+			this.style.setProperty(CSS_VAR_TRANSLATE_Y_END, `${endPosition}px`);
 		} else {
-			this.position += delta;
-			if (this.directionSign < 0 && this.position <= offEndPosition || this.directionSign > 0 && this.position >= offEndPosition) {
-				this.position = startPosition;
-				this.incrementLoopCount();
-				if (this.shouldStopAfterLoop()) this.stop();
-			}
+			this.style.setProperty(CSS_VAR_TRANSLATE_X_START, `${startPosition}px`);
+			this.style.setProperty(CSS_VAR_TRANSLATE_X_END, `${endPosition}px`);
+			this.style.setProperty(CSS_VAR_TRANSLATE_Y_START, "0px");
+			this.style.setProperty(CSS_VAR_TRANSLATE_Y_END, "0px");
 		}
-		this.render();
+		this.restartAnimation();
 	}
-	incrementLoopCount() {
-		this.loopsDone++;
+	getCssIterationCount() {
+		if (this.behavior === "slide" && !this.hasAttribute(ATTR_LOOP)) return "1";
+		if (!this.hasAttribute(ATTR_LOOP)) return "infinite";
+		if (Number.isFinite(this.loop) && this.loop > 0) return String(this.loop);
+		return "infinite";
+	}
+	handleAnimationEnd() {
+		if (!this.hasFiniteAnimation()) return;
+		this.running = false;
+		this.syncAnimationPlayState();
 	}
-	shouldStopAfterLoop() {
-		return this.hasAttribute(ATTR_LOOP) && this.loop > 0 && this.loopsDone >= this.loop;
+	restartAnimation() {
+		this.track.style.animationName = "none";
+		this.track.offsetWidth;
+		this.track.style.removeProperty("animation-name");
 	}
-	render() {
-		if (this.isVerticalDirection) this.track.style.transform = `translateY(${this.position}px)`;
-		else this.track.style.transform = `translateX(${this.position}px)`;
+	hasFiniteAnimation() {
+		if (this.behavior === "slide" && !this.hasAttribute(ATTR_LOOP)) return true;
+		return this.hasAttribute(ATTR_LOOP) && Number.isFinite(this.loop) && this.loop > 0;
 	}
 };
 var defineRemarqueebleElements = () => {

package/package.json

@@ -3,17 +3,15 @@
 		"name": "Rémino Rem",
 		"url": "https://remino.net/"
 	},
-	"browser": "dist/remarqueeble.umd.js",
+	"browser": "dist/remarqueeble.cjs",
 	"description": "Custom element tribute to the cursed glory of marquee.",
-	"dependencies": {
-		"@remino/astro-image-variants": "^0.1.1",
-		"@remino/astro-middleware": "^0.1.0",
-		"@remino/astro-site-nav": "^0.4.2",
-		"@remino/directive": "^5.3.4"
-	},
 	"devDependencies": {
 		"@astrojs/check": "^0.9.4",
 		"@eslint/js": "^10.0.1",
+		"@remino/astro-image-variants": "^0.1.1",
+		"@remino/astro-middleware": "^0.1.0",
+		"@remino/astro-site-nav": "^0.4.2",
+		"@remino/directive": "^5.3.4",
 		"astro": "^7.0.0",
 		"astro-compressor": "^1.3.0",
 		"astro-eslint-parser": "^1.4.0",
@@ -55,6 +53,10 @@
 	"main": "dist/remarqueeble.cjs",
 	"module": "dist/remarqueeble.mjs",
 	"name": "remarqueeble",
+	"sideEffects": [
+		"./dist/remarqueeble-auto.*",
+		"./src/lib/auto.ts"
+	],
 	"scripts": {
 		"build": "npm run js:build && npm run site:assets && astro build",
 		"dev": "astro dev",
@@ -78,5 +80,5 @@
 	},
 	"type": "module",
 	"types": "dist/remarqueeble.d.ts",
-	"version": "0.2.0"
+	"version": "0.3.0"
 }

package/dist/remarqueeble.umd.js

@@ -1,29 +0,0 @@
-/*! remarqueeble v0.2.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.remarqueeble={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=`left`,n=`scroll`,r=6,i=85,a=60,o=`200px`,s=`calc(100% - (var(--attr-hspace, 0px) * 2))`,c=`direction`,l=`behavior`,u=`scrollamount`,d=`scrolldelay`,f=`truespeed`,p=`loop`,m=`bgcolor`,h=`width`,g=`height`,_=`hspace`,v=`vspace`,y=`--attr-width`,b=`--attr-height`,x=`--attr-hspace`,S=`--attr-vspace`,C=`--attr-bgcolor`,w=globalThis.HTMLElement??class{},T=e=>{if(e===null)return null;let t=e.trim();return t===``?null:/^[+-]?(?:\d+|\d*\.\d+)$/.test(t)?`${t}px`:globalThis.CSS?.supports(`width`,t)?t:null},E=[{attribute:h,cssVar:y,parser:T},{attribute:g,cssVar:b,parser:T,fallback(e){return e.isVerticalDirection&&!e.hasAttribute(g)?o:null}},{attribute:_,cssVar:x,parser:T},{attribute:v,cssVar:S,parser:T},{attribute:m,cssVar:C,parser:e=>{if(e===null)return null;let t=e.trim();return t===``?null:globalThis.CSS?.supports(`background-color`,t)?t:null}}],D=class extends w{static observedAttributes=[c,l,u,d,f,p,m,h,g,_,v];track;running=!1;position=0;lastTime=null;loopsDone=0;forward=!0;rafId=null;constructor(){super();let e=this.attachShadow({mode:`open`});e.innerHTML=`
-			<style>
-				:host {
-					display: inline-block;
-					text-align: initial;
-					overflow: hidden !important;
-					white-space: nowrap;
-					width: var(${y}, ${s});
-					height: var(${b}, auto);
-					margin-inline: var(${x}, 0px);
-					margin-block: var(${S}, 0px);
-					background-color: var(${C}, transparent);
-					box-sizing: border-box;
-				}
-
-				:host([direction="up"]),
-				:host([direction="down"]) {
-					white-space: normal;
-				}
-
-				.track {
-					display: inline-block;
-					will-change: transform;
-				}
-			</style>
-
-			<span class="track"><slot></slot></span>
-		`;let t=e.querySelector(`.track`);if(!t)throw Error(`Remarqueeble track element was not created.`);this.track=t}connectedCallback(){this.running=!0,this.syncPresentationalHints(),requestAnimationFrame(()=>{!this.isConnected||!this.running||(this.reset(),this.tick())})}disconnectedCallback(){this.running=!1,this.lastTime=null,this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null)}attributeChangedCallback(e,t,n){t!==n&&(this.syncPresentationalHints(),this.isConnected&&this.reset())}get direction(){return this.getAttribute(c)||t}get behavior(){return this.getAttribute(l)||n}get scrollAmount(){let e=this.getAttribute(u),t=e===null||e.trim()===``?NaN:Number(e);return Number.isFinite(t)&&t>=0?t:r}get scrollDelay(){let e=this.getAttribute(d),t=e===null||e.trim()===``?NaN:Number(e),n=Number.isFinite(t)&&t>=0?t:i;return this.hasAttribute(f)?n:Math.max(n,a)}get loop(){let e=this.getAttribute(p);return e===null?-1:Number(e)}get directionSign(){return this.direction===`right`||this.direction===`down`?1:-1}get isVerticalDirection(){return this.direction===`up`||this.direction===`down`}start(){this.running||(this.running=!0,this.lastTime=null,this.tick())}stop(){this.running=!1,this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null)}syncPresentationalHints(){for(let e of E)this.syncVar(e)}syncVar(e){let t=this.getAttribute(e.attribute),n=e.parser(t),r=e.fallback?e.fallback(this):null;if(n==null){r==null?this.style.removeProperty(e.cssVar):this.style.setProperty(e.cssVar,r);return}this.style.setProperty(e.cssVar,n)}reset(){let e=this.getHostSize(),t=this.getTrackSize();this.loopsDone=0,this.forward=!0,this.position=this.behavior===`alternate`?this.getAlternateStartPosition(e,t):this.getStartPosition(e,t),this.render()}getHostSize(){return this.isVerticalDirection?this.clientHeight:this.clientWidth}getTrackSize(){return this.isVerticalDirection?this.track.offsetHeight:this.track.offsetWidth}getStartPosition(e,t){return this.directionSign<0?e:-t}getFlushEndPosition(e,t){return this.directionSign<0?0:e-t}getOffEndPosition(e,t){return this.directionSign<0?-t:e}getSlideEndPosition(e,t){return this.directionSign<0?0:e-t}getAlternateStartPosition(e,t){return this.directionSign<0?e-t:0}tick(e=performance.now()){this.running&&(this.lastTime===null&&(this.lastTime=e),e-this.lastTime>=this.scrollDelay&&(this.step(),this.lastTime=e),this.running&&(this.rafId=requestAnimationFrame(e=>this.tick(e))))}step(){let e=this.getHostSize(),t=this.getTrackSize(),n=this.getStartPosition(e,t),r=this.getFlushEndPosition(e,t),i=this.getOffEndPosition(e,t),a=this.getSlideEndPosition(e,t),o=this.getAlternateStartPosition(e,t),s=this.scrollAmount,c=this.directionSign*s;this.behavior===`alternate`?(this.position+=this.forward?c:-c,this.forward?(this.directionSign<0&&this.position<=r||this.directionSign>0&&this.position>=r)&&(this.position=r,this.forward=!1,this.incrementLoopCount(),this.shouldStopAfterLoop()&&this.stop()):(this.directionSign<0&&this.position>=o||this.directionSign>0&&this.position<=o)&&(this.position=o,this.forward=!0,this.incrementLoopCount(),this.shouldStopAfterLoop()&&this.stop())):this.behavior===`slide`?(this.position+=c,(this.directionSign<0&&this.position<=a||this.directionSign>0&&this.position>=a)&&(this.position=a,this.incrementLoopCount(),!this.hasAttribute(p)||this.loop<=0||this.shouldStopAfterLoop()?this.stop():this.position=n)):(this.position+=c,(this.directionSign<0&&this.position<=i||this.directionSign>0&&this.position>=i)&&(this.position=n,this.incrementLoopCount(),this.shouldStopAfterLoop()&&this.stop())),this.render()}incrementLoopCount(){this.loopsDone++}shouldStopAfterLoop(){return this.hasAttribute(p)&&this.loop>0&&this.loopsDone>=this.loop}render(){this.isVerticalDirection?this.track.style.transform=`translateY(${this.position}px)`:this.track.style.transform=`translateX(${this.position}px)`}},O=()=>{typeof customElements>`u`||(customElements.get(`re-marquee`)||customElements.define(`re-marquee`,D),customElements.get(`re-marquee-ble`)||customElements.define(`re-marquee-ble`,D))};O(),e.defineRemarqueebleElements=O});