307 lines
7.2 KiB
HTML
307 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Andrey Flat — Space</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<link rel="icon" href="favicon.ico" type="image/x-icon" />
|
|
<style>
|
|
body {
|
|
background: #111;
|
|
color: #eee;
|
|
font-family: sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
header {
|
|
background: #222;
|
|
padding: 1em;
|
|
text-align: center;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
}
|
|
|
|
header h1 {
|
|
display: inline-block;
|
|
transition: letter-spacing 1s ease, transform 1s ease;
|
|
}
|
|
|
|
header h1:hover {
|
|
letter-spacing: 1em;
|
|
transform: scaleX(1.2);
|
|
transition: letter-spacing 5s ease, transform 5s ease;
|
|
}
|
|
|
|
main {
|
|
max-width: 1280px;
|
|
margin: 2em auto;
|
|
padding: 0 1em;
|
|
}
|
|
|
|
section {
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 1em;
|
|
background: #222;
|
|
color: #888;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.video-container {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 1280px;
|
|
margin: 0 auto 2em;
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
|
|
.video-container iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
display: block;
|
|
}
|
|
|
|
.video-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
.video-tile {
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background: #000;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.video-tile video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.video-tile.fade-in {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.8s ease, transform 0.8s ease;
|
|
}
|
|
|
|
.video-tile.fade-in.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.caption {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 12px;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
color: #fff;
|
|
transition: opacity 0.3s ease;
|
|
opacity: 0;
|
|
}
|
|
|
|
.video-tile:hover .caption {
|
|
opacity: 1;
|
|
}
|
|
|
|
.caption h3 {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.caption p {
|
|
margin: 4px 0 0;
|
|
font-size: 0.8rem;
|
|
color: #ccc;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>flat space</h1>
|
|
<p>small space in the huge universe</p>
|
|
</header>
|
|
|
|
<main>
|
|
<section style="text-align: left;">
|
|
<p>Welcome to the personal space of CG artist Andrey Flat. This is a curated selection of works spanning the past 20 years.</p>
|
|
<p><em>Andrey began his creative journey in 2003 with machinima, experimenting with Sony Vegas, Daz 3D, and 3ds Max. By 2008, he was working as a television video editor, focusing on After Effects.</p>
|
|
<p>In 2011, he joined a film studio, advancing to VFX supervisor while mastering tools like Final Cut, DaVinci Resolve, Cinema 4D, Naiad, and Houdini.</p>
|
|
<p>Since 2014, he has worked independently, specializing in procedural and generative effects with Houdini, Nuke, Touchdesigner and ComfyUI.</p>
|
|
</section>
|
|
<section>
|
|
<div class="video-container">
|
|
<iframe
|
|
src="https://www.youtube.com/embed/GwuMJhSXcj0"
|
|
title="Showreel 2023"
|
|
frameborder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen
|
|
loading="lazy">
|
|
</iframe>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
<section>
|
|
<div class="video-grid" id="videoGrid"></div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>contacts</h2>
|
|
<p>andrey.flat.post@gmail.com</p>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>© 2025 Andrey Flat</p>
|
|
</footer>
|
|
|
|
<script>
|
|
const videoSources = [
|
|
{
|
|
src: "videos/project_01.mp4",
|
|
title: "Dry Season",
|
|
description: "Personal project. Vellum cloth simulation"
|
|
},
|
|
{
|
|
src: "videos/project_02.mp4",
|
|
title: "SALUKI",
|
|
description: "Music video. Large water FLIP simulation."
|
|
},
|
|
{
|
|
src: "videos/project_03.mp4",
|
|
title: "Coming Soon",
|
|
description: "database preparation"
|
|
},
|
|
{
|
|
src: "videos/project_04.mp4",
|
|
title: "Coming Soon",
|
|
description: "database preparation"
|
|
},
|
|
{
|
|
src: "videos/project_05.mp4",
|
|
title: "Coming Soon",
|
|
description: "database preparation"
|
|
},
|
|
{
|
|
src: "videos/project_06.mp4",
|
|
title: "Coming Soon",
|
|
description: "database preparation"
|
|
},
|
|
{
|
|
src: "videos/project_07.mp4",
|
|
title: "Coming Soon",
|
|
description: "database preparation"
|
|
},
|
|
{
|
|
src: "videos/project_08.mp4",
|
|
title: "Coming Soon",
|
|
description: "database preparation"
|
|
},
|
|
{
|
|
src: "videos/project_09.mp4",
|
|
title: "Stone Flow",
|
|
description: "RBD system driven by curves and noise"
|
|
}
|
|
];
|
|
|
|
const videoGrid = document.getElementById('videoGrid');
|
|
|
|
function loadVideos(startIndex, count) {
|
|
for (let i = startIndex; i < Math.min(startIndex + count, videoSources.length); i++) {
|
|
const { src, title, description } = videoSources[i];
|
|
|
|
const tile = document.createElement('div');
|
|
tile.className = 'video-tile fade-in';
|
|
|
|
const video = document.createElement('video');
|
|
video.poster = `${src.replace(/\.mp4$/, '.jpg')}`;
|
|
video.muted = true;
|
|
video.loop = true;
|
|
video.preload = 'none';
|
|
video.playsInline = true;
|
|
video.dataset.src = src;
|
|
|
|
const caption = document.createElement('div');
|
|
caption.className = 'caption';
|
|
caption.innerHTML = `<h3>${title}</h3><p>${description}</p>`;
|
|
|
|
tile.appendChild(video);
|
|
tile.appendChild(caption);
|
|
videoGrid.appendChild(tile);
|
|
|
|
fadeObserver.observe(tile);
|
|
videoObserver.observe(video);
|
|
|
|
tile.addEventListener('mouseenter', () => {
|
|
if (!video.src) video.src = video.dataset.src;
|
|
video.play();
|
|
});
|
|
tile.addEventListener('mouseleave', () => {
|
|
video.pause();
|
|
video.removeAttribute('src');
|
|
video.load();
|
|
});
|
|
}
|
|
}
|
|
|
|
let loadedCount = 0;
|
|
const BATCH_SIZE = 3;
|
|
|
|
function handleScroll() {
|
|
const scrollY = window.scrollY + window.innerHeight;
|
|
const gridBottom = videoGrid.offsetTop + videoGrid.offsetHeight;
|
|
if (scrollY > gridBottom - 200) {
|
|
loadVideos(loadedCount, BATCH_SIZE);
|
|
loadedCount += BATCH_SIZE;
|
|
}
|
|
}
|
|
|
|
const fadeObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, { threshold: 0.1 });
|
|
|
|
const videoObserver = new IntersectionObserver((entries, observer) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const video = entry.target;
|
|
if (!video.src) {
|
|
video.src = video.dataset.src;
|
|
}
|
|
observer.unobserve(video);
|
|
}
|
|
});
|
|
}, { rootMargin: '200px 0px' });
|
|
|
|
window.addEventListener('scroll', handleScroll);
|
|
window.addEventListener('load', () => {
|
|
loadVideos(loadedCount, BATCH_SIZE);
|
|
loadedCount += BATCH_SIZE;
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|