1. Current Exhibit - Winter 2025
2. Figures in Space - Fashion intersection.j
https://u.cubeupload.com/SSVASIA/mkli8rnu2q6s2o.jpeg
https://u.cubeupload.com/SSVASIA/mklicfq3mt6ky0.jpeg
https://u.cubeupload.com/SSVASIA/mklikzt7e1uz0k.jpeg
https://u.cubeupload.com/SSVASIA/mklif0kbrt8zpt.jpeg
https://u.cubeupload.com/SSVASIA/mklif0kbrt8zpt.jpeg
https://u.cubeupload.com/SSVASIA/mklif0kbrt8zpt.jpeg
https://u.cubeupload.com/SSVASIA/mkliifb4mxoz3q.jpeg
https://u.cubeupload.com/SSVASIA/mkliezeq9cy04a.jpeg
https://u.cubeupload.com/SSVASIA/mklic6tjjghmqb.jpeg
https://u.cubeupload.com/SSVASIA/mkliexld0lqp37.jpeg
https://u.cubeupload.com/SSVASIA/mkliek2fwmrw9m.jpeg
https://u.cubeupload.com/SSVASIA/mklibwoc4kfguu.jpeg
https://u.cubeupload.com/SSVASIA/mklibgya1pont7.jpeg
https://u.cubeupload.com/SSVASIA/mkliy4m5ihnd38.jpeg
https://u.cubeupload.com/SSVASIA/mklj6ocn5o791o.jpeg
https://u.cubeupload.com/SSVASIA/mklj6la0o1ncvf.jpeg
https://u.cubeupload.com/SSVASIA/mklitxhb58n7wf.jpeg
https://u.cubeupload.com/SSVASIA/mklizh93op0dqv.jpeg
https://u.cubeupload.com/SSVASIA/mkliymc6zaakf8.jpeg
https://u.cubeupload.com/SSVASIA/mklitjdy5tsdn2.jpeg
https://u.cubeupload.com/SSVASIA/mklit36yaod8fc.jpeg
https://u.cubeupload.com/SSVASIA/mklit77enysyak.jpeg
https://u.cubeupload.com/SSVASIA/mklit5mjxt4tm3.jpeg
Replace urls in this code
<style>
/* Base container */
.floating-wrapper {
position: relative;
width: 100%;
height: 80vh;
overflow: hidden;
background: #0b0b0b;
border-radius: 12px;
margin: 20px 0;
}
/* ----- DESKTOP: make box wider than Berlin column ----- */
@media (min-width: 992px) {
.floating-wrapper {
width: 110%; /* wider than content column */
margin-left: -5%; /* centers the extra width */
}
}
/* ----- MOBILE: give more height so images breathe ----- */
@media (max-width: 991px) {
.floating-wrapper {
height: 95vh; /* taller on phones */
}
}
/* floating images */
.float-img {
position: absolute;
cursor: pointer;
border-radius: 6px;
box-shadow: 0 0 10px rgba(255,255,255,0.06);
will-change: transform;
touch-action: none;
pointer-events: auto;
}
/* preview bubble */
#preview {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
max-width: 80vw;
max-height: 80vh;
background: rgba(0,0,0,0.9);
padding: 12px;
border-radius: 14px;
display: none;
z-index: 9999;
text-align: center;
}
#preview img {
max-width: 100%;
max-height: 70vh;
border-radius: 10px;
}
/* bottom label only */
#gallery-label {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
color: #aaa;
font-size: 12px;
letter-spacing: 0.02em;
}
</style>
<div class="floating-wrapper" id="stage">
<div id="gallery-label">2026 © ssv.asia</div>
</div>
<div id="preview">
<img id="preview-img">
</div>
<script>
/* -------- YOUR FLICKR LINKS -------- */
const imageLinks = [
"https://live.staticflickr.com/65535/55032609279_918d778838_b.jpg",
"https://live.staticflickr.com/65535/55031452287_068ca1d11c_b.jpg",
"https://live.staticflickr.com/65535/55032684935_c339419594_b.jpg",
"https://live.staticflickr.com/65535/55031452107_aa5c5aa96e_b.jpg",
"https://live.staticflickr.com/65535/55032609049_a0b4b8b785_b.jpg",
"https://live.staticflickr.com/65535/55032530808_63b311f228_b.jpg",
"https://live.staticflickr.com/65535/55032685020_6559987b05_b.jpg",
"https://live.staticflickr.com/65535/55032684690_dd22730a81_b.jpg",
"https://live.staticflickr.com/65535/55032531113_db9a2f02c5_b.jpg",
"https://live.staticflickr.com/65535/55031451932_6e07f32fe8_b.jpg",
"https://live.staticflickr.com/65535/55032608759_fd04322437_b.jpg",
"https://live.staticflickr.com/65535/55031452352_962b26014c_b.jpg",
"https://live.staticflickr.com/65535/55032684615_47efecf4bc_b.jpg",
"https://live.staticflickr.com/65535/55038322338_934e595cee_b.jpg",
"https://live.staticflickr.com/65535/55038322248_8de2048ed0_b.jpg",
"https://live.staticflickr.com/65535/55038322093_a3da260833_b.jpg",
"https://live.staticflickr.com/65535/55037237507_106c04b354_b.jpg",
"https://live.staticflickr.com/65535/55038396419_3d856423e5_b.jpg",
"https://live.staticflickr.com/65535/55038321978_db73497759_b.jpg",
"https://live.staticflickr.com/65535/55038142741_6022aec8dd_b.jpg",
"https://live.staticflickr.com/65535/55037237202_aafe4b3644_b.jpg",
"https://live.staticflickr.com/65535/55038142676_7313cf44a4_b.jpg",
"https://live.staticflickr.com/65535/55037237097_82f297266b_b.jpg",
"https://live.staticflickr.com/65535/55038142581_032d546e80_b.jpg",
"https://live.staticflickr.com/65535/55037237107_637ddcb3d7_b.jpg"
];
/* -------- SETTINGS -------- */
const MIN_W = 48;
const MAX_W = 80;
const SPEED = 0.18;
const BOUNCE = 0.995;
const stage = document.getElementById("stage");
const preview = document.getElementById("preview");
const previewImg = document.getElementById("preview-img");
let items = [];
/* grid seeding to avoid initial overlap */
function placeInGrid(w, h, index, rect) {
const cols = Math.max(1, Math.floor(rect.width / (w + 20)));
const row = Math.floor(index / cols);
const col = index % cols;
return {
x: Math.min(col * (w + 20) + 10, rect.width - w - 10),
y: Math.min(row * (h + 20) + 10, rect.height - h - 10)
};
}
/* strong separation */
function separate(a, b) {
const ax = a.x + a.w/2;
const ay = a.y + a.h/2;
const bx = b.x + b.w/2;
const by = b.y + b.h/2;
let dx = ax - bx;
let dy = ay - by;
let dist = Math.hypot(dx, dy);
const minDist = (a.w + b.w) * 0.65;
if (dist < minDist) {
if (dist === 0) { dx = Math.random(); dy = Math.random(); dist = 1; }
const angle = Math.atan2(dy, dx);
const push = (minDist - dist) * 0.6;
a.x += Math.cos(angle) * push;
a.y += Math.sin(angle) * push;
b.x -= Math.cos(angle) * push;
b.y -= Math.sin(angle) * push;
const tX = a.vx, tY = a.vy;
a.vx = b.vx * BOUNCE;
a.vy = b.vy * BOUNCE;
b.vx = tX * BOUNCE;
b.vy = tY * BOUNCE;
}
}
/* create images */
imageLinks.forEach((src, i) => {
const img = document.createElement("img");
img.src = src;
img.className = "float-img";
img.onload = () => {
const ratio = img.naturalWidth / img.naturalHeight;
const w = MIN_W + Math.random() * (MAX_W - MIN_W);
const h = w / ratio;
img.style.width = w + "px";
img.style.height = h + "px";
const rect = stage.getBoundingClientRect();
const pos = placeInGrid(w, h, i, rect);
const vx = (Math.random() - 0.5) * SPEED;
const vy = (Math.random() - 0.5) * SPEED;
items.push({ img, x: pos.x, y: pos.y, w, h, vx, vy });
img.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
stage.appendChild(img);
img.addEventListener("click", (e) => {
e.stopPropagation();
previewImg.src = src;
preview.style.display = "block";
});
};
});
/* close preview */
document.body.addEventListener("click", () => {
preview.style.display = "none";
});
/* animation */
function animate() {
const rect = stage.getBoundingClientRect();
for (let i = 0; i < items.length; i++) {
let a = items[i];
a.x += a.vx;
a.y += a.vy;
a.x = Math.max(0, Math.min(a.x, rect.width - a.w));
a.y = Math.max(0, Math.min(a.y, rect.height - a.h));
if (a.x === 0 || a.x === rect.width - a.w) a.vx *= -1;
if (a.y === 0 || a.y === rect.height - a.h) a.vy *= -1;
for (let j = i + 1; j < items.length; j++) {
separate(a, items[j]);
}
a.img.style.transform = `translate(${a.x}px, ${a.y}px)`;
}
requestAnimationFrame(animate);
}
animate();
window.addEventListener("resize", () => {
const rect = stage.getBoundingClientRect();
items.forEach(a => {
a.x = Math.min(a.x, rect.width - a.w);
a.y = Math.min(a.y, rect.height - a.h);
});
});
</script>