libretech/M6C9.de
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Activity

fix format

Browse Source
This commit is contained in:
Michael Czechowski
2025-06-14 15:21:46 +02:00
parent a1bc2c907d
commit 8352af4cc9
2 changed files with 36 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Carousel.pug
View File

@@ -44,12 +44,14 @@ mixin Carousel(items, options)
loading=index < 3 ? "eager" : "lazy"
)
if item.caption
.absolute.bottom-0.left-0.right-0.bg-gradient-to-t.p-4(class="sm:static sm:bg-gradient-unset from-black/70 sm:text-nls-white dark:sm:text-nls-black sm:self-center")
.absolute.bottom-0.left-0.right-0.bg-gradient-to-t.p-4(
class="sm:static sm:bg-gradient-unset from-black/70 sm:text-nls-white dark:sm:text-nls-black sm:self-center"
)
p.text-white.text-xl.font-large= item.caption
if item.description
p.text-white.text-base.mt-2(class="sm:w-2/3")= item.description
if item.href
a.text-white.text-base.mt-4(class="underline hover:text-nls-black dark:hover:text-nls-white", href=item.href, target="_blank", rel="noopener noreferrer")= item.href
a.text-white.text-base.mt-4.underline(class="hover:text-nls-black dark:hover:text-nls-white", href=item.href, target="_blank", rel="noopener noreferrer")= item.href
else if item.type === "brand"
.aspect-square.flex.items-center.justify-center.mx-2.mb-4
img.max-w-full.max-h-full.object-contain.p-4(src=item.logo, alt=item.name, loading=index < 6 ? "eager" : "lazy")

79
src/components/Landingpage.pug
View File

@@ -115,24 +115,28 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
};
// Mouse events
this.canvas.addEventListener('mousemove', (e) => {
this.canvas.addEventListener("mousemove", (e) => {
updateMousePosition(e.clientX, e.clientY);
});
// Touch events
this.canvas.addEventListener('touchmove', (e) => {
e.preventDefault();
if (e.touches.length > 0) {
updateMousePosition(e.touches[0].clientX, e.touches[0].clientY);
}
}, { passive: false });
this.canvas.addEventListener(
"touchmove",
(e) => {
e.preventDefault();
if (e.touches.length > 0) {
updateMousePosition(e.touches[0].clientX, e.touches[0].clientY);
}
},
{passive: false},
);
// Mouse enter/leave for graceful transitions
this.canvas.addEventListener('mouseenter', () => {
this.canvas.addEventListener("mouseenter", () => {
// Smooth entrance - no abrupt changes needed
});
this.canvas.addEventListener('mouseleave', () => {
this.canvas.addEventListener("mouseleave", () => {
// Gradually return to center when mouse leaves
this.mouse.normalizedX = 0.5;
this.mouse.normalizedY = 0.5;
@@ -140,35 +144,30 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
}
updateDynamicParameters() {
const { normalizedX, normalizedY } = this.mouse;
const { parameterLerp } = this.smoothing;
const {normalizedX, normalizedY} = this.mouse;
const {parameterLerp} = this.smoothing;
// Color temperature interaction (Implementation 6)
// X-axis: Cool blues (left) → Warm oranges (right)
// Y-axis: Affects saturation and lightness
// Hue mapping: 0.6 (blue) to 0.1 (orange) based on X position
const targetHue = 0.6 - (normalizedX * 0.5); // Maps 0.6 → 0.1
this.dynamic.hueBase = this.dynamic.hueBase * (1 - parameterLerp) +
targetHue * parameterLerp;
const targetHue = 0.6 - normalizedX * 0.5; // Maps 0.6 → 0.1
this.dynamic.hueBase = this.dynamic.hueBase * (1 - parameterLerp) + targetHue * parameterLerp;
// Y position affects saturation (top = high saturation, bottom = low)
const targetSatMin = 0.2 + (1 - normalizedY) * 0.4; // 0.2-0.6 range
const targetSatMax = 0.5 + (1 - normalizedY) * 0.4; // 0.5-0.9 range
this.dynamic.saturation.min = this.dynamic.saturation.min * (1 - parameterLerp) +
targetSatMin * parameterLerp;
this.dynamic.saturation.max = this.dynamic.saturation.max * (1 - parameterLerp) +
targetSatMax * parameterLerp;
this.dynamic.saturation.min = this.dynamic.saturation.min * (1 - parameterLerp) + targetSatMin * parameterLerp;
this.dynamic.saturation.max = this.dynamic.saturation.max * (1 - parameterLerp) + targetSatMax * parameterLerp;
// Y position affects lightness (top = bright, bottom = dark)
const targetLightMin = 0.15 + (1 - normalizedY) * 0.3; // 0.15-0.45 range
const targetLightMax = 0.45 + (1 - normalizedY) * 0.4; // 0.45-0.85 range
this.dynamic.lightness.min = this.dynamic.lightness.min * (1 - parameterLerp) +
targetLightMin * parameterLerp;
this.dynamic.lightness.max = this.dynamic.lightness.max * (1 - parameterLerp) +
targetLightMax * parameterLerp;
this.dynamic.lightness.min = this.dynamic.lightness.min * (1 - parameterLerp) + targetLightMin * parameterLerp;
this.dynamic.lightness.max = this.dynamic.lightness.max * (1 - parameterLerp) + targetLightMax * parameterLerp;
}
createNodes() {
@@ -232,22 +231,16 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
const normalizedGroup = groupIndex / (this.options.groupCount - 1);
const normalizedSpline = splineIndex / (this.options.splineCount - 1);
const hue = this.dynamic.hueBase + normalizedGroup * this.options.hueVariation +
Math.sin(normalizedSpline * Math.PI * 2) * 0.05;
const hue = this.dynamic.hueBase + normalizedGroup * this.options.hueVariation + Math.sin(normalizedSpline * Math.PI * 2) * 0.05;
const saturation = this.dynamic.saturation.min +
(this.dynamic.saturation.max - this.dynamic.saturation.min) *
(1 - Math.abs(offset) / this.options.spread);
const saturation = this.dynamic.saturation.min + (this.dynamic.saturation.max - this.dynamic.saturation.min) * (1 - Math.abs(offset) / this.options.spread);
const lightness = this.dynamic.lightness.min +
(this.dynamic.lightness.max - this.dynamic.lightness.min) *
(1 - (Math.abs(offset) / this.options.spread) * 0.6);
const lightness = this.dynamic.lightness.min + (this.dynamic.lightness.max - this.dynamic.lightness.min) * (1 - (Math.abs(offset) / this.options.spread) * 0.6);
const material = new THREE.LineBasicMaterial({
color: new THREE.Color().setHSL(hue, saturation, lightness),
transparent: true,
opacity: (this.options.opacity / (splineIndex / 6)) *
(1 - (Math.abs(offset) / this.options.spread) * 0.1),
opacity: (this.options.opacity / (splineIndex / 6)) * (1 - (Math.abs(offset) / this.options.spread) * 0.1),
linewidth: this.options.lineWidth,
});
@@ -270,8 +263,7 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
const distance = Math.abs(baseX - node.x);
const influence = Math.exp(-distance * distance * 2);
const animatedPhase = node.phase + (this.time + timeOffset) * node.speed +
groupIndex * 0.2 + splineIndex * 0.01;
const animatedPhase = node.phase + (this.time + timeOffset) * node.speed + groupIndex * 0.2 + splineIndex * 0.01;
const waveAmplitude = node.radius * influence;
@@ -280,16 +272,14 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
const amplitude = this.options.waveAmplitudes[freqIndex] || 0.1;
const phaseMultiplier = 1 + freqIndex * 0.3;
y += Math.sin(t * Math.PI * freq + animatedPhase * phaseMultiplier) *
waveAmplitude * amplitude;
y += Math.sin(t * Math.PI * freq + animatedPhase * phaseMultiplier) * waveAmplitude * amplitude;
});
x += Math.cos(t * Math.PI * 6 + animatedPhase * 0.9) * waveAmplitude * 0.1;
});
const transitionOffset = this.getOffsetTransition(t);
y += offset * (1 + Math.sin(t * Math.PI * 2 + (this.time + timeOffset) * 0.5) * 0.3) +
transitionOffset;
y += offset * (1 + Math.sin(t * Math.PI * 2 + (this.time + timeOffset) * 0.5) * 0.3) + transitionOffset;
points.push(new THREE.Vector3(x, y, 0));
}
@@ -306,16 +296,11 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
const normalizedGroup = groupIndex / (this.options.groupCount - 1);
const normalizedSpline = splineIndex / (this.options.splineCount - 1);
const hue = this.dynamic.hueBase + normalizedGroup * this.options.hueVariation +
Math.sin(normalizedSpline * Math.PI * 2) * 0.05;
const hue = this.dynamic.hueBase + normalizedGroup * this.options.hueVariation + Math.sin(normalizedSpline * Math.PI * 2) * 0.05;
const saturation = this.dynamic.saturation.min +
(this.dynamic.saturation.max - this.dynamic.saturation.min) *
(1 - Math.abs(offset) / this.options.spread);
const saturation = this.dynamic.saturation.min + (this.dynamic.saturation.max - this.dynamic.saturation.min) * (1 - Math.abs(offset) / this.options.spread);
const lightness = this.dynamic.lightness.min +
(this.dynamic.lightness.max - this.dynamic.lightness.min) *
(1 - (Math.abs(offset) / this.options.spread) * 0.6);
const lightness = this.dynamic.lightness.min + (this.dynamic.lightness.max - this.dynamic.lightness.min) * (1 - (Math.abs(offset) / this.options.spread) * 0.6);
line.material.color.setHSL(hue, saturation, lightness);
}
@@ -421,4 +406,4 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
window.addEventListener("beforeunload", () => curtain.destroy());
window.addEventListener("resize", () => curtain.resize());
}
});
});