cry/wa2k.com
1
0
Fork 0
forked from UniverseBow/wa2k.com-Website
Code Pull requests Activity

refraction testing and edge fixing

Browse source
This commit is contained in:
UniverseBow 2026-03-15 11:30:49 -07:00
parent 5dca7b2ac1
commit 44c4df7364
3 changed files with 581 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
www/banner.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 MiB

393
www/index.html
View file

@ -1,17 +1,386 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>WA2000</title> <title>WA2000</title>
<link type="text/css" rel="stylesheet" href="./style.css"> <link type="text/css" rel="stylesheet" href="./style.css">
</head>
<body>
</head> <div class="banner">
<body> <img src="banner.png" alt="banner" />
<div class="card"> </div>
<h1>waff waff!</h1>
<div class="divider"></div> <!-- SVG filter definition — hidden, just provides the filter for Chrome -->
<p>tiny text!!!</p> <svg id="liquid-glass-svg" xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden;">
<p>wuff</p> <defs>
<filter id="liquid-glass-nav" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
<feImage id="nav-disp-img" result="disp_map" />
<feDisplacementMap in="SourceGraphic" in2="disp_map" id="nav-disp-filter" xChannelSelector="R" yChannelSelector="G" result="refracted" />
<feImage id="nav-spec-img" result="spec_map" />
<feBlend in="refracted" in2="spec_map" mode="screen" result="with_specular" />
<feComposite in="with_specular" in2="SourceGraphic" operator="atop" />
</filter>
<filter id="liquid-glass" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
<!-- Load the displacement map image -->
<feImage id="displacement-map-img" result="disp_map" />
<!-- Apply displacement to the backdrop (SourceGraphic here = the backdrop) -->
<feDisplacementMap
in="SourceGraphic"
in2="disp_map"
id="displacement-map-filter"
xChannelSelector="R"
yChannelSelector="G"
result="refracted"
/>
<!-- Load the specular highlight image -->
<feImage id="specular-map-img" result="spec_map" />
<!-- Blend specular on top of the refracted backdrop using screen mode -->
<feBlend in="refracted" in2="spec_map" mode="screen" result="with_specular" />
<!-- Clip result to the original element shape -->
<feComposite in="with_specular" in2="SourceGraphic" operator="atop" />
</filter>
</defs>
</svg>
<!-- Liquid glass searchbar — sits above the card, expands on click -->
<div class="nav-wrap">
<div class="nav-pill" id="nav-pill">
<div class="nav-pill-bar" id="nav-pill-bar">
<span class="nav-logo">WA2000</span>
<svg class="nav-chevron" id="nav-chevron" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<polyline points="5,7 10,13 15,7" stroke="rgba(255,255,255,0.7)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="nav-dropdown" id="nav-dropdown">
<div class="nav-divider"></div>
<a href="#" class="nav-link">Home</a>
<a href="#" class="nav-link">About</a>
<a href="#" class="nav-link">Gallery</a>
<a href="#" class="nav-link">Contact</a>
</div>
</div> </div>
</body> </div>
<div class="card" id="card">
<h1>waff waff!</h1>
<div class="divider"></div>
<p>tiny text!!!</p>
<p>wuff</p>
</div>
<script>
// ─── Configuration ────────────────────────────────────────────────────────────
const CONFIG = {
bezelWidth: 0.18, // Fraction of the smaller dimension used for the curved rim — wider = bigger refraction band
glassThickness: 3.5, // Optical depth multiplier — higher = rays bend further at the edges
ior: 1.65, // Index of refraction — real glass is ~1.5; slightly above for a more dramatic bend
scaleRatio: 2.5, // Final multiplier on pixel displacement — scales the whole effect up or down
specularAngle: -55, // Degrees of the light source direction — negative = upper-left
specularOpacity: 0.9, // Peak alpha of the specular highlight — higher = brighter rim
specularSaturation: 6, // Unused in painting but kept for future colour-shift use
borderRadius: 50, // Must match CSS border-radius in pixels — curves the refraction band at corners
};
// ─── Maths helpers ────────────────────────────────────────────────────────────
/** Convex squircle surface — Apple-style soft bezel profile */
function surfaceHeight(t) {
// t: 0 = outer edge of bezel, 1 = where the flat interior begins
// Squircle formula: softer than a circle arc, keeps refraction gradients smooth when stretched to a rectangle
return Math.pow(1 - Math.pow(1 - t, 4), 0.25);
}
/** Numerical derivative of the surface function at t — gives the surface slope */
function surfaceNormal(t) {
const d = 0.001; // Tiny step for finite-difference approximation
const y1 = surfaceHeight(Math.max(0, t - d)); // Sample just before t
const y2 = surfaceHeight(Math.min(1, t + d)); // Sample just after t
const derivative = (y2 - y1) / (2 * d); // Central difference = slope at t
return { x: -derivative, y: 1 }; // Rotate 90°: tangent → normal pointing inward
}
/** Snell–Descartes refraction — returns the direction a ray travels after entering the glass */
function refract(incidentDir, normal, n1, n2) {
const nLen = Math.hypot(normal.x, normal.y); // Length of normal vector
const nx = normal.x / nLen; // Normalise X component
const ny = normal.y / nLen; // Normalise Y component
const ratio = n1 / n2; // Ratio of refractive indices (air/glass)
const cosI = -(incidentDir.x * nx + incidentDir.y * ny); // Cosine of angle of incidence
const sinT2 = ratio * ratio * (1 - cosI * cosI); // sin²(refraction angle) via Snell's law
if (sinT2 > 1) return null; // Total internal reflection — ray can't exit, skip this sample
const cosT = Math.sqrt(1 - sinT2); // Cosine of refraction angle
return {
x: ratio * incidentDir.x + (ratio * cosI - cosT) * nx, // Refracted ray X direction
y: ratio * incidentDir.y + (ratio * cosI - cosT) * ny, // Refracted ray Y direction
};
}
// ─── Rounded rect helpers ─────────────────────────────────────────────────────
/**
* Given a pixel (px, py) inside a rounded rectangle of size (width x height)
* with corner radius r, returns:
* dist — how far the pixel is from the nearest border edge (positive = inside)
* nx,ny — the inward-pointing unit normal at that nearest border point
*
* This is the single source of truth for both the displacement and specular maps.
*/
function roundedRectInfo(px, py, width, height, r) {
// Clamp radius so it can't exceed half the shortest side
const radius = Math.min(r, width / 2, height / 2);
// Corner arc centres (one per corner, in absolute pixel coords)
const corners = [
{ cx: radius, cy: radius }, // top-left
{ cx: width - radius, cy: radius }, // top-right
{ cx: radius, cy: height - radius }, // bottom-left
{ cx: width - radius, cy: height - radius }, // bottom-right
];
// Which corner zone is this pixel in?
const inCorner =
(px < radius || px > width - radius) &&
(py < radius || py > height - radius);
let dist, nx, ny;
if (inCorner) {
// Find the nearest corner arc centre
let best = null;
let bestDist = Infinity;
for (const c of corners) {
const d = Math.hypot(px - c.cx, py - c.cy);
if (d < bestDist) { bestDist = d; best = c; }
}
// Distance from the arc = radius - distance from arc centre
dist = radius - bestDist;
// Inward normal points from pixel toward the arc centre
const len = bestDist || 1;
nx = (best.cx - px) / len;
ny = (best.cy - py) / len;
} else {
// Flat side — nearest edge is whichever straight side is closest
const dLeft = px;
const dRight = width - 1 - px;
const dTop = py;
const dBottom = height - 1 - py;
const minD = Math.min(dLeft, dRight, dTop, dBottom);
dist = minD;
if (minD === dLeft) { nx = 1; ny = 0; }
else if (minD === dRight) { nx = -1; ny = 0; }
else if (minD === dTop) { nx = 0; ny = 1; }
else { nx = 0; ny = -1; }
}
return { dist, nx, ny };
}
// ─── Displacement map generation ─────────────────────────────────────────────
function buildDisplacementMap(width, height) {
const bezel = CONFIG.bezelWidth * Math.min(width, height);
const samples = 128;
// ── Step 1: Pre-calculate displacement magnitudes along one radius ──
const magnitudes = new Float32Array(samples);
const incident = { x: 0, y: 1 };
for (let i = 0; i < samples; i++) {
const t = i / (samples - 1);
const normal = surfaceNormal(t);
const refracted = refract(incident, normal, 1.0, CONFIG.ior);
magnitudes[i] = refracted
? (refracted.x - incident.x) * CONFIG.glassThickness * bezel
: 0;
}
const maxDisp = Math.max(...magnitudes) || 1;
// ── Step 2: Paint every pixel ──
const data = new Uint8ClampedArray(width * height * 4);
for (let py = 0; py < height; py++) {
for (let px = 0; px < width; px++) {
const idx = (py * width + px) * 4;
const { dist, nx, ny } = roundedRectInfo(px, py, width, height, CONFIG.borderRadius);
let dispX = 0, dispY = 0;
if (dist >= 0 && dist < bezel) {
const t = dist / bezel;
const sampleIdx = Math.min(samples - 1, Math.floor(t * (samples - 1)));
const mag = magnitudes[sampleIdx] / maxDisp;
dispX = nx * mag;
dispY = ny * mag;
}
data[idx] = Math.round(128 + dispX * 127);
data[idx + 1] = Math.round(128 + dispY * 127);
data[idx + 2] = 128;
data[idx + 3] = 255;
}
}
return {
imageData: new ImageData(data, width, height),
maxDisplacement: maxDisp * CONFIG.scaleRatio,
};
}
// ─── Specular highlight map generation ───────────────────────────────────────
function buildSpecularMap(width, height) {
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
const bezel = CONFIG.bezelWidth * Math.min(width, height);
const lightAngleRad = (CONFIG.specularAngle * Math.PI) / 180;
const lightDir = { x: Math.cos(lightAngleRad), y: Math.sin(lightAngleRad) };
const imageData = ctx.createImageData(width, height);
const data = imageData.data;
for (let py = 0; py < height; py++) {
for (let px = 0; px < width; px++) {
const idx = (py * width + px) * 4;
const { dist, nx, ny } = roundedRectInfo(px, py, width, height, CONFIG.borderRadius);
let intensity = 0;
if (dist >= 0 && dist < bezel) {
const t = dist / bezel;
const dot = nx * lightDir.x + ny * lightDir.y;
const rim = Math.max(0, dot);
const slope = Math.abs(surfaceNormal(t).x);
const raw = rim * slope * (1 - t);
intensity = Math.pow(raw, 0.5);
}
data[idx] = Math.round(235 * intensity);
data[idx + 1] = Math.round(245 * intensity);
data[idx + 2] = Math.round(255 * intensity);
data[idx + 3] = Math.round(CONFIG.specularOpacity * 255 * intensity);
}
}
ctx.putImageData(imageData, 0, 0);
return canvas.toDataURL();
}
// ─── ImageData → data URL ─────────────────────────────────────────────────────
function imageDataToDataURL(imageData) {
const canvas = document.createElement('canvas'); // Temporary offscreen canvas
canvas.width = imageData.width;
canvas.height = imageData.height;
canvas.getContext('2d').putImageData(imageData, 0, 0); // Write pixel data into canvas
return canvas.toDataURL(); // Export as PNG data URL for SVG feImage
}
// ─── Apply filter to card ─────────────────────────────────────────────────────
function applyLiquidGlass() {
const card = document.getElementById('card');
const rect = card.getBoundingClientRect(); // Get the card's actual rendered size in pixels
const w = Math.round(rect.width);
const h = Math.round(rect.height);
if (w === 0 || h === 0) return; // Guard: don't run before layout is ready
const { imageData, maxDisplacement } = buildDisplacementMap(w, h); // Generate refraction map
const dispDataURL = imageDataToDataURL(imageData); // Convert to data URL for feImage
const specularDataURL = buildSpecularMap(w, h); // Generate specular highlight map
const dispImg = document.getElementById('displacement-map-img'); // feImage for displacement
const specImg = document.getElementById('specular-map-img'); // feImage for specular
const dispFilter = document.getElementById('displacement-map-filter'); // feDisplacementMap element
dispImg.setAttribute('href', dispDataURL); // Load displacement map into SVG filter
dispImg.setAttribute('width', w); // Match filter image size to card width
dispImg.setAttribute('height', h); // Match filter image size to card height
specImg.setAttribute('href', specularDataURL); // Load specular map into SVG filter
specImg.setAttribute('width', w);
specImg.setAttribute('height', h);
dispFilter.setAttribute('scale', maxDisplacement); // Tell feDisplacementMap the real-pixel scale of the map
// Only overwrite backdrop-filter in Chrome — Firefox ignores SVG filters here
// and would lose its CSS fallback blur if we overwrote card.style.backdropFilter
const isChrome = /Chrome/.test(navigator.userAgent) && !/Edg|Firefox/.test(navigator.userAgent);
if (isChrome) {
card.style.backdropFilter = 'url(#liquid-glass) blur(3px) saturate(1.8) brightness(1.05)'; // Full chain: refraction + blur + colour boost
card.style.webkitBackdropFilter = 'url(#liquid-glass) blur(3px) saturate(1.8) brightness(1.05)'; // Webkit prefix for older Chrome builds
}
}
window.addEventListener('load', applyLiquidGlass); // Run once the page has fully laid out
window.addEventListener('resize', applyLiquidGlass); // Re-run if the card size changes (e.g. window resize)
function applyNavGlass() {
const pill = document.getElementById('nav-pill');
const rect = pill.getBoundingClientRect();
const w = Math.round(rect.width);
const h = Math.round(rect.height);
if (w === 0 || h === 0) return;
const savedBezel = CONFIG.bezelWidth;
const savedScale = CONFIG.scaleRatio;
CONFIG.bezelWidth = 0.12;
CONFIG.scaleRatio = 1.8;
const { imageData, maxDisplacement } = buildDisplacementMap(w, h);
const dispDataURL = imageDataToDataURL(imageData);
const specularDataURL = buildSpecularMap(w, h);
CONFIG.bezelWidth = savedBezel;
CONFIG.scaleRatio = savedScale;
document.getElementById('nav-disp-img').setAttribute('href', dispDataURL);
document.getElementById('nav-disp-img').setAttribute('width', w);
document.getElementById('nav-disp-img').setAttribute('height', h);
document.getElementById('nav-spec-img').setAttribute('href', specularDataURL);
document.getElementById('nav-spec-img').setAttribute('width', w);
document.getElementById('nav-spec-img').setAttribute('height', h);
document.getElementById('nav-disp-filter').setAttribute('scale', maxDisplacement);
const isChrome = /Chrome/.test(navigator.userAgent) && !/Edg|Firefox/.test(navigator.userAgent);
if (isChrome) {
pill.style.backdropFilter = 'url(#liquid-glass-nav) blur(3px) saturate(1.8) brightness(1.05)';
pill.style.webkitBackdropFilter = 'url(#liquid-glass-nav) blur(3px) saturate(1.8) brightness(1.05)';
}
}
const navPill = document.getElementById('nav-pill');
const navBar = document.getElementById('nav-pill-bar');
navBar.addEventListener('click', () => {
const isOpen = navPill.classList.contains('open');
navPill.classList.toggle('open', !isOpen);
setTimeout(applyNavGlass, 320);
});
document.addEventListener('click', (e) => {
if (!navPill.contains(e.target)) {
navPill.classList.remove('open');
setTimeout(applyNavGlass, 320);
}
});
window.addEventListener('load', applyNavGlass);
window.addEventListener('resize', applyNavGlass);
</script>
</body>
</html> </html>

239
www/style.css
View file

@ -1,47 +1,206 @@
* { margin: 0; padding: 0; box-sizing: border-box; } /* Remove default browser spacing; include padding/border in element size */
* { margin: 0; padding: 0; box-sizing: border-box; } body {
min-height: 100vh;
display: flex;
flex-direction: column; /* Stack banner and card top to bottom */
align-items: center; /* Keep card horizontally centered */
justify-content: flex-start; /* Stack from the top rather than centering vertically */
background: #0a0e1a url('background.png') center/cover no-repeat;
}
body { .banner {
min-height: 100vh; width: 70%;
display: flex; max-height: 280px;
align-items: center; overflow: hidden;
justify-content: center; margin: 5px 5px 10px 5px; /* 5px on top/left/right, 10px on bottom */
background: #0a0e1a url('background.png') center/cover no-repeat; border-radius: 35px; /* Rounded corners */
} }
.card { .banner img {
width: min(520px, 88%); width: 100%; /* Stretch image to fill the banner width */
padding: 52px; height: 100%; /* Fill the banner height */
border-radius: 24px; object-fit: cover; /* Crop and center the image rather than squishing it */
text-align: center; object-position: center top; /* Anchor to the top so the most important part of the image stays visible */
background: rgba(255, 255, 255, 0.06); display: block; /* Remove the default inline gap below images */
border: 1px solid rgba(255, 255, 255, 0.14); }
backdrop-filter: blur(32px) saturate(1.4);
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45);
}
h1 { .card {
font-size: clamp(36px, 6vw, 52px); width: min(880px, 88%); /* Cap width at 880px, but shrink to 88% of viewport on small screens */
font-weight: 300; height: 540px; /* Fixed height */
line-height: 1.1; padding: 40px; /* Inner spacing on all sides */
color: rgba(255, 255, 255, 0.92); border-radius: 50px; /* Rounded corners */
} text-align: center; /* Center all text content */
background: rgba(255, 255, 255, 0.08); /* Very subtle white tint — more transparent than before so the background breathes through */
border: 2px solid rgba(255, 255, 255, 1); /* Slightly brighter border for a crisper glass edge */
backdrop-filter: blur(8px) saturate(1.8) brightness(1.05); /* Firefox fallback — blur, colour boost, and slight brightness lift; Chrome overrides this via JS with the SVG refraction filter */
-webkit-backdrop-filter: blur(8px) saturate(1.8) brightness(1.05); /* Webkit prefix for Safari compatibility */
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.35), /* Large soft drop shadow for depth/lift */
0 0 0 1px rgba(255, 255, 255, 0.08); /* Hairline outer glow ring */
position: relative; /* Required so ::before/::after pseudo-elements position relative to the card */
overflow: hidden; /* Clip pseudo-elements to the card's rounded corners */
}
h1 em { /* ── Main specular: top-left corner catch ── */
font-style: italic; .card::before {
color: rgba(180, 210, 255, 0.85); content: ''; /* Required to render a pseudo-element with no text */
} position: absolute; /* Layer it on top of the card without affecting layout */
inset: 0; /* Stretch to fill all four edges of the card */
border-radius: inherit; /* Match the card's rounded corners */
background:
radial-gradient(
ellipse 60% 30% at 10% -5%, /* Tighter ellipse originating just above the top-left corner */
rgba(255, 255, 255, 0.28) 0%, /* Bright white at the light source center */
transparent 55% /* Fade out before reaching the middle of the card */
),
linear-gradient(
128deg, /* Diagonal direction: top-left → bottom-right */
rgba(255, 255, 255, 0.13) 0%, /* Broad glancing sheen starting at the top-left corner */
rgba(255, 255, 255, 0.04) 30%, /* Dim mid-point to keep the fade gradual */
transparent 55% /* Fades out before the center */
);
pointer-events: none; /* Prevent this overlay from blocking mouse interaction */
}
.divider { /* ── Glass rim: inset edge highlights ── */
width: 40px; .card::after {
height: 0.5px; content: ''; /* Required to render the pseudo-element */
background: rgba(255, 255, 255, 0.2); position: absolute; /* Layer over the card without shifting layout */
margin: 22px auto; inset: 0; /* Fill the card edge to edge */
} border-radius: inherit; /* Match card rounding */
background: transparent; /* No fill — only the inset shadow matters here */
border: 1px solid transparent; /* Placeholder border so box-shadow inset renders correctly on all sides */
border-image: none; /* Ensure no gradient border overrides the transparent border */
box-shadow:
inset 1px 1px 0 rgba(218, 218, 218, 0.55), /* Bright top and left inner edge — simulates light hitting the glass rim */
inset -1px -1px 0 rgba(0, 0, 0, 0.12); /* Darker bottom and right inner edge — simulates shadow on the far side */
pointer-events: none; /* Let clicks pass through to card content */
}
h1 {
font-size: clamp(36px, 6vw, 52px); /* Fluid size: min 36px, scales with viewport, max 52px */
font-weight: 300; /* Light weight for an elegant look */
line-height: 1.1; /* Tight leading for large display text */
color: rgba(255, 255, 255, 0.92); /* Near-white, slightly transparent */
}
h1 em {
font-style: italic; /* Standard italic for emphasis */
color: rgba(180, 210, 255, 0.85); /* Cool blue tint for italicised words */
}
.divider {
width: 40px; /* Short horizontal rule */
height: 0.5px; /* Hairline thickness */
background: rgba(255, 255, 255, 0.2); /* Faint white line */
margin: 22px auto; /* Vertical spacing + horizontal centering */
}
p {
font-size: 15px;
font-weight: 300; /* Light weight to match the heading style */
line-height: 1.75; /* Generous leading for readability */
color: rgba(255, 255, 255, 0.52); /* Dimmed white — secondary text hierarchy */
}
/* ── Nav pill wrapper — fixed to top of viewport ── */
.nav-wrap {
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex;
justify-content: center;
}
/* ── The pill itself ── */
.nav-pill {
width: 160px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.30);
backdrop-filter: blur(8px) saturate(1.8) brightness(1.05);
-webkit-backdrop-filter: blur(8px) saturate(1.8) brightness(1.05);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.25),
inset 1px 1px 0 rgba(255, 255, 255, 0.45),
inset -1px -1px 0 rgba(0, 0, 0, 0.10);
overflow: hidden;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ── Pill expands and corners soften when open ── */
.nav-pill.open {
border-radius: 22px;
width: 200px;
}
/* ── The always-visible top bar: logo + chevron ── */
.nav-pill-bar {
display: flex;
align-items: center;
justify-content: space-between;
height: 44px;
padding: 0 18px;
cursor: pointer;
user-select: none;
}
.nav-logo {
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.88);
letter-spacing: 0.06em;
}
/* ── Chevron rotates 180° when open ── */
.nav-chevron {
width: 16px;
height: 16px;
flex-shrink: 0;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-pill.open .nav-chevron {
transform: rotate(180deg);
}
/* ── Dropdown — hidden by default, slides down when open ── */
.nav-dropdown {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.2s ease;
}
.nav-pill.open .nav-dropdown {
max-height: 300px;
opacity: 1;
}
.nav-divider {
height: 1px;
background: rgba(255, 255, 255, 0.12);
margin: 0 14px;
}
.nav-link {
display: block;
padding: 11px 18px;
font-size: 14px;
font-weight: 300;
color: rgba(255, 255, 255, 0.70);
text-decoration: none;
transition: color 0.15s ease,
background 0.15s ease;
}
.nav-link:hover {
color: rgba(255, 255, 255, 0.95);
background: rgba(255, 255, 255, 0.06);
}
p {
font-size: 15px;
font-weight: 300;
line-height: 1.75;
color: rgba(255, 255, 255, 0.52);
}