q-component behavior-bar {
q-property label: "bar"
q-property unitMode: "px"
q-property barColor: "#1d4ed8"
q-property widthValue: "140px"
q-property heightValue: "44px"
q-property leftValue: "20px"
q-property topValue: "20px"
behavior on widthValue {
q-property-animation {
duration: 500
steps: 20
onstepped {
this.component.style.width = this.component.cssLength(value);
}
onstopped {
this.component.style.width = this.component.cssLength(value);
}
}
}
behavior on heightValue {
q-property-animation {
duration: 1000
steps: 30
onstepped {
this.component.style.height = this.component.cssLength(value);
}
onstopped {
this.component.style.height = this.component.cssLength(value);
}
}
}
behavior on leftValue {
q-property-animation {
duration: 1000
steps: 30
onstepped {
this.component.style.left = this.component.cssLength(value);
}
onstopped {
this.component.style.left = this.component.cssLength(value);
}
}
}
behavior on topValue {
q-property-animation {
duration: 500
steps: 20
onstepped {
this.component.style.top = this.component.cssLength(value);
}
onstopped {
this.component.style.top = this.component.cssLength(value);
}
}
}
function randomBetween(min, max) {
return min + Math.random() * (max - min);
}
function unitValue(value, unit) {
return unit ? String(value) + unit : Number(value);
}
function randomLength(unit, min, max) {
return this.unitValue(Math.round(this.randomBetween(min, max) * 100) / 100, unit);
}
function cssLength(value) {
var unit = String(this.unitMode || "").trim();
return css(value, unit || "px");
}
function randomize() {
var randomNumber = 2 + Math.floor(Math.random() * 2);
var unit = String(this.unitMode || "").trim();
if (unit === "%") {
if (randomNumber === 0) { this.widthValue = this.randomLength("%", 18, 48); }
else if (randomNumber === 1) { this.heightValue = this.randomLength("%", 6, 18); }
else if (randomNumber === 2) { this.leftValue = this.randomLength("%", 3, 68); }
else { this.topValue = this.randomLength("%", 8, 72); }
} else if (unit === "px") {
if (randomNumber === 0) { this.widthValue = this.randomLength("px", 80, 260); }
else if (randomNumber === 1) { this.heightValue = this.randomLength("px", 32, 92); }
else if (randomNumber === 2) { this.leftValue = this.randomLength("px", 12, 560); }
else { this.topValue = this.randomLength("px", 80, 420); }
} else if (unit === "rem") {
if (randomNumber === 0) { this.widthValue = this.randomLength("rem", 5, 16); }
else if (randomNumber === 1) { this.heightValue = this.randomLength("rem", 2, 6); }
else if (randomNumber === 2) { this.leftValue = this.randomLength("rem", 1, 34); }
else { this.topValue = this.randomLength("rem", 7, 24); }
} else if (unit === "vh") {
if (randomNumber === 0) { this.widthValue = this.randomLength("vh", 10, 30); }
else if (randomNumber === 1) { this.heightValue = this.randomLength("vh", 5, 14); }
else if (randomNumber === 2) { this.leftValue = this.randomLength("vh", 2, 62); }
else { this.topValue = this.randomLength("vh", 10, 52); }
} else {
if (randomNumber === 0) { this.widthValue = this.randomLength("", 90, 260); }
else if (randomNumber === 1) { this.heightValue = this.randomLength("", 34, 110); }
else if (randomNumber === 2) { this.leftValue = this.randomLength("", 24, 620); }
else { this.topValue = this.randomLength("", 100, 470); }
}
}
function applyBox() {
this.style.position = "absolute";
this.style.display = "grid";
this.style.placeItems = "center";
this.style.boxSizing = "border-box";
this.style.border = "1px solid rgba(255,255,255,.35)";
this.style.borderRadius = "0.75rem";
this.style.background = String(this.barColor || "#1d4ed8");
this.style.color = "#ffffff";
this.style.fontWeight = "800";
this.style.fontSize = "0.82rem";
this.style.overflow = "hidden";
this.style.boxShadow = "0 18px 40px rgba(0,0,0,.28)";
this.style.width = this.cssLength(this.widthValue);
this.style.height = this.cssLength(this.heightValue);
this.style.left = this.cssLength(this.leftValue);
this.style.top = this.cssLength(this.topValue);
}
onReady {
this.applyBox();
}
div {
text { ${this.component.label} }
}
}
q-component behavior-property-animation-case {
q-property widthValue: "80px"
q-property stepCount: 0
behavior on widthValue {
q-property-animation {
duration: 280
steps: 12
onstepped {
this.component.setAttribute("data-step-count", String(Number(this.component.getAttribute("data-step-count") || 0) + 1));
this.component.style.width = css(value, "px");
}
onstopped {
this.component.style.width = css(value, "px");
}
}
}
onReady {
this.component.style.display = "grid";
this.component.style.placeItems = "center";
this.component.style.width = "80px";
this.component.style.height = "32px";
this.component.style.background = "#38bdf8";
this.component.style.color = "#082f49";
this.component.style.borderRadius = "0.4rem";
this.component.style.fontWeight = "800";
this.component.style.marginTop = "0.75rem";
this.component.widthValue = "210px";
}
style { display: grid; place-items: center; width: 80px; height: 32px; background: #38bdf8; color: #082f49; border-radius: 0.4rem; font-weight: 800; margin-top: 0.75rem; }
text { q-property-animation behavior }
}
q-component behavior-multi-property-case {
q-property widthValue: "70px"
q-property heightValue: "32px"
q-property stepCount: 0
behavior on widthValue {
q-property-animation {
duration: 320
steps: 12
onstepped {
this.component.setAttribute("data-step-count", String(Number(this.component.getAttribute("data-step-count") || 0) + 1));
this.component.style.width = css(value, "px");
}
onstopped {
this.component.style.width = css(value, "px");
}
}
}
behavior on heightValue {
q-property-animation {
duration: 320
steps: 12
from: "32px"
onstepped {
this.component.style.height = css(value, "px");
}
onstopped {
this.component.style.height = css(value, "px");
}
}
}
onReady {
this.component.style.display = "grid";
this.component.style.placeItems = "center";
this.component.style.width = "70px";
this.component.style.height = "32px";
this.component.style.background = "#22c55e";
this.component.style.color = "#052e16";
this.component.style.borderRadius = "0.4rem";
this.component.style.fontWeight = "800";
this.component.style.marginTop = "0.75rem";
this.component.widthValue = "230px";
this.component.heightValue = "88px";
}
style { display: grid; place-items: center; width: 70px; height: 32px; background: #22c55e; color: #052e16; border-radius: 0.4rem; font-weight: 800; margin-top: 0.75rem; }
text { multi property behavior }
}
q-component behavior-staggered-property-case {
q-property widthValue: "72px"
q-property heightValue: "34px"
q-property stepCount: 0
behavior on widthValue {
q-property-animation {
duration: 260
steps: 10
onstepped {
this.component.setAttribute("data-step-count", String(Number(this.component.getAttribute("data-step-count") || 0) + 1));
this.component.style.width = css(value, "px");
}
onstopped {
this.component.style.width = css(value, "px");
}
}
}
behavior on heightValue {
q-property-animation {
duration: 260
steps: 10
from: "34px"
onstepped {
this.component.style.height = css(value, "px");
}
onstopped {
this.component.style.height = css(value, "px");
}
}
}
onReady {
this.component.style.display = "grid";
this.component.style.placeItems = "center";
this.component.style.width = "72px";
this.component.style.height = "34px";
this.component.style.background = "#f59e0b";
this.component.style.color = "#451a03";
this.component.style.borderRadius = "0.4rem";
this.component.style.fontWeight = "800";
this.component.style.marginTop = "0.75rem";
this.component.widthValue = "240px";
this.component.heightValue = "96px";
}
style { display: grid; place-items: center; width: 72px; height: 34px; background: #f59e0b; color: #451a03; border-radius: 0.4rem; font-weight: 800; margin-top: 0.75rem; }
text { staggered property behavior }
}
section.behavior-stage {
style { position: relative; min-height: 100vh; overflow: hidden; padding: 1rem; box-sizing: border-box; }
header {
style { position: relative; z-index: 2; max-width: 48rem; }
h1 { text { Behavior and q-property-animation } }
p {
style { color: #cbd5e1; line-height: 1.5; }
text { q-timer continuously retargets width, height, left, and top for %, px, rem, vh, and unitless q-property values. }
}
}
behavior-bar percentBar {
label: "percent"
unitMode: "%"
barColor: "#1d4ed8"
widthValue: "36%"
heightValue: "10%"
leftValue: "5%"
topValue: "22%"
}
behavior-bar pixelBar {
label: "px"
unitMode: "px"
barColor: "#0f766e"
widthValue: "180px"
heightValue: "58px"
leftValue: "300px"
topValue: "120px"
}
behavior-bar remBar {
label: "rem"
unitMode: "rem"
barColor: "#7c3aed"
widthValue: "9rem"
heightValue: "3rem"
leftValue: "7rem"
topValue: "19rem"
}
behavior-bar vhBar {
label: "vh"
unitMode: "vh"
barColor: "#be123c"
widthValue: "18vh"
heightValue: "7vh"
leftValue: "42vh"
topValue: "30vh"
}
behavior-bar unitlessBar {
label: "unitless"
unitMode: ""
barColor: "#d97706"
widthValue: 160
heightValue: 54
leftValue: 80
topValue: 430
}
section.behavior-group-tests {
style { position: relative; z-index: 3; width: min(36rem, calc(100vw - 2rem)); margin-top: 1rem; padding: 0.9rem; background: rgba(15,23,42,.76); border: 1px solid rgba(255,255,255,.18); border-radius: 0.75rem; box-sizing: border-box; }
h2 { text { Behavior q-property-animation checks } }
behavior-property-animation-case propertyAnimationCase { }
behavior-multi-property-case multiPropertyCase { }
behavior-staggered-property-case staggeredPropertyCase { }
}
}
q-timer behaviorAnimationShuffle {
interval: 450
repeat: true
running: true
onTimeout {
document.querySelectorAll("behavior-bar").forEach(function(bar) {
if (bar && typeof bar.randomize === "function") {
bar.randomize();
}
});
document.body.dataset.shuffle = "running";
}
}