nebulae/hydra-labs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fast project architecture

Browse Source
This commit is contained in:
Nebulae
2025-12-26 15:52:44 +01:00
parent 1c56514314
commit 24355a8697
2 changed files with 241 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
experiments/videos_superposition.html Normal file
View File

@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Vidéos d'archive</title>
<style>
html,
body {
margin: 0;
padding: 0;
background: black;
overflow: hidden;
}
</style>
</head>
<body>
<!-- Hydra -->
<script src="https://unpkg.com/hydra-synth"></script>
<script>
const hydra = new Hydra();
// Man Lab
s0.initVideo("../videos/video1.mp4");
// Lady Lab
s1.initVideo("../videos/video2.mp4");
src(s0).out(o0);
src(s1).out(o1);
src(s0)
.blend(src(s1).scale(0.5), 0.3)
.color(1, 0, 3)
//.modulateRotate(src(s0).kaleid(10), () => 0.1 + mouse.x * 0.002)
// .modulate(noise(3), 0.2)
// .kaleid(20)
// .scale(({time})=>Math.sin(time*1)*0.5+1)
// .modulate(noise(0.6,0.5))
.out();
</script>
</body>
</html>

219
index.html
View File

@@ -1,9 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Hydra Local</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hydra Labs</title>
<style> <style>
html, html,
body { body {
@@ -11,42 +11,199 @@
padding: 0; padding: 0;
background: black; background: black;
overflow: hidden; overflow: hidden;
font-family: "Courier New", monospace;
width: 100%;
height: 100%;
}
canvas {
position: fixed;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
z-index: 1;
}
#welcome {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
font-weight: bold;
color: white;
z-index: 10;
text-transform: uppercase;
letter-spacing: 0.5rem;
animation: glitch 3s infinite;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
0 0 20px rgba(0, 255, 255, 0.6), 0 0 30px rgba(255, 0, 255, 0.4);
}
@keyframes glitch {
0%,
100% {
transform: translate(-50%, -50%);
opacity: 1;
}
20% {
transform: translate(-49%, -50%);
text-shadow: 2px 0 red, -2px 0 cyan, 0 0 20px rgba(255, 255, 255, 0.8);
}
40% {
transform: translate(-51%, -50%);
opacity: 0.9;
}
60% {
transform: translate(-50%, -49%);
text-shadow: -2px 0 red, 2px 0 cyan, 0 0 30px rgba(0, 255, 255, 0.6);
}
80% {
transform: translate(-50%, -51%);
opacity: 1;
}
}
#subtitle {
position: absolute;
top: 60%;
left: 50%;
transform: translateX(-50%);
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.7);
z-index: 10;
letter-spacing: 0.3rem;
animation: fadeInOut 4s ease-in-out infinite;
}
#author {
position: absolute;
top: 65%;
left: 50%;
transform: translateX(-50%);
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.5);
z-index: 10;
letter-spacing: 0.2rem;
font-style: italic;
}
#experiments {
position: absolute;
top: 72%;
left: 50%;
transform: translateX(-50%);
z-index: 10;
background: rgba(0, 0, 0, 0.7);
padding: 1.5rem 2rem;
border: 2px solid rgba(0, 255, 0, 0.5);
border-radius: 5px;
box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
}
#experiments h3 {
margin: 0 0 1rem 0;
color: #ffffff;
font-size: 1rem;
letter-spacing: 0.1rem;
}
#experiments h3::before {
content: "> ";
color: #00ff00;
}
.experiment-list {
list-style: none;
padding: 0;
margin: 0;
}
.experiment-list li {
margin: 0.5rem 0;
}
.experiment-list a {
color: #00ffff;
text-decoration: none;
font-size: 0.95rem;
transition: all 0.3s ease;
display: inline-block;
}
.experiment-list a::before {
content: "$ ./";
color: #00ff00;
margin-right: 0.5rem;
}
.experiment-list a:hover {
color: #ffffff;
text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
transform: translateX(5px);
}
.experiment-list a:hover::before {
content: "$ ./";
color: #ffffff;
animation: blink 0.8s infinite;
}
@keyframes blink {
0%,
50% {
opacity: 1;
}
51%,
100% {
opacity: 0.3;
}
}
@keyframes fadeInOut {
0%,
100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
} }
</style> </style>
</head> </head>
<body>
<div id="welcome">Bienvenue</div>
<div id="subtitle">Hydra Labs</div>
<div id="author">by Nebulae Design</div>
<body> <div id="experiments">
<h3>Expérimentations récentes</h3>
<ul class="experiment-list">
<li>
<a href="experiments/videos_superposition.html">Vidéos d'archives</a>
</li>
<li><a href="#">À venir..</a></li>
<li><a href="#">À venir..</a></li>
<li><a href="#">À venir...</a></li>
</ul>
</div>
<!-- Hydra --> <!-- Hydra -->
<script src="https://unpkg.com/hydra-synth"></script> <script src="https://unpkg.com/hydra-synth"></script>
<!-- Ton code --> <!-- Animation Hydra -->
<script> <script>
const hydra = new Hydra() const hydra = new Hydra({ detectAudio: false });
// White Man Lab // Animation de fond psychédélique
s0.initVideo("videos/video1.mp4") osc(10, 0.1, 1.5)
.kaleid(5)
// White Woman Lab .color(1.5, 0.5, 1.5)
s1.initVideo("videos/video2.mp4") .rotate(0.5, 0.1)
.modulateScale(osc(8).rotate(1.5, 0.5), 0.5)
src(s0).out(o0) .blend(osc(20, 0.01, 2).kaleid(50))
src(s1).out(o1) .out();
src(s0)
.scale(0.4)
.scrollX(0.5)
.scrollY(0.3)
.blend(src(s1), 0.3)
.color(1, 0, 3)
.modulateRotate(src(s0).kaleid(10), () => 0.1 + mouse.x * 0.002)
// .modulate(noise(3), 0.2)
// .kaleid(20)
// .scale(({time})=>Math.sin(time*1)*0.5+1)
// .modulate(noise(0.6,0.5))
.out()
</script> </script>
</body>
</body>
</html> </html>