Skip to content

Commit 5d324af

Browse files
danlexclaude
danlex
and
claude
committed
Add prev/next navigation between all animation pages
Every animation page now has: - ← Previous / Next → links at the bottom (above controls) - Left/Right arrow keyboard shortcuts to jump between animations - Links wrap around (last → first, first → last) - Subtle floating style with blur backdrop, hover effects Navigate the full gallery without returning to the index page. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 52403c8 commit 5d324af

116 files changed

Lines changed: 5444 additions & 1 deletion

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎aizawa-attractor.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,45 @@
8282
font-family: monospace;
8383
}
8484
.zoom-btn:hover { background: rgba(255,255,255,0.12); }
85+
86+
.page-nav {
87+
position: fixed;
88+
bottom: 80px;
89+
left: 0; right: 0;
90+
display: flex;
91+
justify-content: space-between;
92+
padding: 0 20px;
93+
z-index: 9;
94+
pointer-events: none;
95+
}
96+
.page-nav a {
97+
pointer-events: auto;
98+
color: rgba(255,255,255,0.25);
99+
text-decoration: none;
100+
font-family: 'Courier New', monospace;
101+
font-size: 10px;
102+
letter-spacing: 1.5px;
103+
text-transform: uppercase;
104+
padding: 10px 18px;
105+
border: 1px solid rgba(255,255,255,0.06);
106+
border-radius: 8px;
107+
background: rgba(0,0,0,0.3);
108+
backdrop-filter: blur(8px);
109+
transition: all 0.3s;
110+
max-width: 200px;
111+
overflow: hidden;
112+
text-overflow: ellipsis;
113+
white-space: nowrap;
114+
}
115+
.page-nav a:hover {
116+
color: rgba(255,255,255,0.6);
117+
border-color: rgba(255,255,255,0.15);
118+
background: rgba(0,0,0,0.5);
119+
}
120+
.page-nav .nav-arrow {
121+
font-size: 14px;
122+
margin: 0 6px;
123+
}
85124
</style>
86125
</head>
87126
<body>
@@ -519,6 +558,10 @@ <h1>Aizawa Attractor</h1>
519558
composer.setSize(innerWidth, innerHeight);
520559
});
521560
</script>
561+
<div class="page-nav">
562+
<a href="wave-interference.html"><span class="nav-arrow">&larr;</span> Wave Interference</a>
563+
<a href="ant-colony.html">Ant Colony <span class="nav-arrow">&rarr;</span></a>
564+
</div>
522565
<script src="shared-ui.js"></script>
523566
</body>
524567
</html>

‎ant-colony.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,45 @@
9292
font-family: monospace;
9393
}
9494
.zoom-btn:hover { background: rgba(255,255,255,0.12); }
95+
96+
.page-nav {
97+
position: fixed;
98+
bottom: 80px;
99+
left: 0; right: 0;
100+
display: flex;
101+
justify-content: space-between;
102+
padding: 0 20px;
103+
z-index: 9;
104+
pointer-events: none;
105+
}
106+
.page-nav a {
107+
pointer-events: auto;
108+
color: rgba(255,255,255,0.25);
109+
text-decoration: none;
110+
font-family: 'Courier New', monospace;
111+
font-size: 10px;
112+
letter-spacing: 1.5px;
113+
text-transform: uppercase;
114+
padding: 10px 18px;
115+
border: 1px solid rgba(255,255,255,0.06);
116+
border-radius: 8px;
117+
background: rgba(0,0,0,0.3);
118+
backdrop-filter: blur(8px);
119+
transition: all 0.3s;
120+
max-width: 200px;
121+
overflow: hidden;
122+
text-overflow: ellipsis;
123+
white-space: nowrap;
124+
}
125+
.page-nav a:hover {
126+
color: rgba(255,255,255,0.6);
127+
border-color: rgba(255,255,255,0.15);
128+
background: rgba(0,0,0,0.5);
129+
}
130+
.page-nav .nav-arrow {
131+
font-size: 14px;
132+
margin: 0 6px;
133+
}
95134
</style>
96135
</head>
97136
<body>
@@ -483,6 +522,10 @@ <h1>Ant Colony</h1>
483522
composer.setSize(innerWidth, innerHeight);
484523
});
485524
</script>
525+
<div class="page-nav">
526+
<a href="aizawa-attractor.html"><span class="nav-arrow">&larr;</span> Aizawa Attractor</a>
527+
<a href="apollonian-gasket.html">Apollonian Gasket <span class="nav-arrow">&rarr;</span></a>
528+
</div>
486529
<script src="shared-ui.js"></script>
487530
</body>
488531
</html>

‎apollonian-gasket.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,45 @@
9292
font-family: monospace;
9393
}
9494
.zoom-btn:hover { background: rgba(255,255,255,0.12); }
95+
96+
.page-nav {
97+
position: fixed;
98+
bottom: 80px;
99+
left: 0; right: 0;
100+
display: flex;
101+
justify-content: space-between;
102+
padding: 0 20px;
103+
z-index: 9;
104+
pointer-events: none;
105+
}
106+
.page-nav a {
107+
pointer-events: auto;
108+
color: rgba(255,255,255,0.25);
109+
text-decoration: none;
110+
font-family: 'Courier New', monospace;
111+
font-size: 10px;
112+
letter-spacing: 1.5px;
113+
text-transform: uppercase;
114+
padding: 10px 18px;
115+
border: 1px solid rgba(255,255,255,0.06);
116+
border-radius: 8px;
117+
background: rgba(0,0,0,0.3);
118+
backdrop-filter: blur(8px);
119+
transition: all 0.3s;
120+
max-width: 200px;
121+
overflow: hidden;
122+
text-overflow: ellipsis;
123+
white-space: nowrap;
124+
}
125+
.page-nav a:hover {
126+
color: rgba(255,255,255,0.6);
127+
border-color: rgba(255,255,255,0.15);
128+
background: rgba(0,0,0,0.5);
129+
}
130+
.page-nav .nav-arrow {
131+
font-size: 14px;
132+
margin: 0 6px;
133+
}
95134
</style>
96135
</head>
97136
<body>
@@ -430,6 +469,10 @@ <h1>Apollonian Gasket</h1>
430469
composer.setSize(innerWidth, innerHeight);
431470
});
432471
</script>
472+
<div class="page-nav">
473+
<a href="ant-colony.html"><span class="nav-arrow">&larr;</span> Ant Colony</a>
474+
<a href="attractor-morph.html">Attractor Morph <span class="nav-arrow">&rarr;</span></a>
475+
</div>
433476
<script src="shared-ui.js"></script>
434477
</body>
435478
</html>

‎attractor-morph.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,45 @@
9292
font-family: monospace;
9393
}
9494
.zoom-btn:hover { background: rgba(255,255,255,0.12); }
95+
96+
.page-nav {
97+
position: fixed;
98+
bottom: 80px;
99+
left: 0; right: 0;
100+
display: flex;
101+
justify-content: space-between;
102+
padding: 0 20px;
103+
z-index: 9;
104+
pointer-events: none;
105+
}
106+
.page-nav a {
107+
pointer-events: auto;
108+
color: rgba(255,255,255,0.25);
109+
text-decoration: none;
110+
font-family: 'Courier New', monospace;
111+
font-size: 10px;
112+
letter-spacing: 1.5px;
113+
text-transform: uppercase;
114+
padding: 10px 18px;
115+
border: 1px solid rgba(255,255,255,0.06);
116+
border-radius: 8px;
117+
background: rgba(0,0,0,0.3);
118+
backdrop-filter: blur(8px);
119+
transition: all 0.3s;
120+
max-width: 200px;
121+
overflow: hidden;
122+
text-overflow: ellipsis;
123+
white-space: nowrap;
124+
}
125+
.page-nav a:hover {
126+
color: rgba(255,255,255,0.6);
127+
border-color: rgba(255,255,255,0.15);
128+
background: rgba(0,0,0,0.5);
129+
}
130+
.page-nav .nav-arrow {
131+
font-size: 14px;
132+
margin: 0 6px;
133+
}
95134
</style>
96135
</head>
97136
<body>
@@ -523,6 +562,10 @@ <h1>Attractor Morph</h1>
523562
composer.setSize(innerWidth, innerHeight);
524563
});
525564
</script>
565+
<div class="page-nav">
566+
<a href="apollonian-gasket.html"><span class="nav-arrow">&larr;</span> Apollonian Gasket</a>
567+
<a href="audio-terrain.html">Audio Terrain <span class="nav-arrow">&rarr;</span></a>
568+
</div>
526569
<script src="shared-ui.js"></script>
527570
</body>
528571
</html>

‎audio-terrain.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,45 @@
9292
font-family: monospace;
9393
}
9494
.zoom-btn:hover { background: rgba(255,255,255,0.12); }
95+
96+
.page-nav {
97+
position: fixed;
98+
bottom: 80px;
99+
left: 0; right: 0;
100+
display: flex;
101+
justify-content: space-between;
102+
padding: 0 20px;
103+
z-index: 9;
104+
pointer-events: none;
105+
}
106+
.page-nav a {
107+
pointer-events: auto;
108+
color: rgba(255,255,255,0.25);
109+
text-decoration: none;
110+
font-family: 'Courier New', monospace;
111+
font-size: 10px;
112+
letter-spacing: 1.5px;
113+
text-transform: uppercase;
114+
padding: 10px 18px;
115+
border: 1px solid rgba(255,255,255,0.06);
116+
border-radius: 8px;
117+
background: rgba(0,0,0,0.3);
118+
backdrop-filter: blur(8px);
119+
transition: all 0.3s;
120+
max-width: 200px;
121+
overflow: hidden;
122+
text-overflow: ellipsis;
123+
white-space: nowrap;
124+
}
125+
.page-nav a:hover {
126+
color: rgba(255,255,255,0.6);
127+
border-color: rgba(255,255,255,0.15);
128+
background: rgba(0,0,0,0.5);
129+
}
130+
.page-nav .nav-arrow {
131+
font-size: 14px;
132+
margin: 0 6px;
133+
}
95134
</style>
96135
</head>
97136
<body>
@@ -437,6 +476,10 @@ <h1>Audio Terrain</h1>
437476
composer.setSize(innerWidth, innerHeight);
438477
});
439478
</script>
479+
<div class="page-nav">
480+
<a href="attractor-morph.html"><span class="nav-arrow">&larr;</span> Attractor Morph</a>
481+
<a href="aurora.html">Aurora <span class="nav-arrow">&rarr;</span></a>
482+
</div>
440483
<script src="shared-ui.js"></script>
441484
</body>
442485
</html>

‎aurora.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,45 @@
9292
font-family: monospace;
9393
}
9494
.zoom-btn:hover { background: rgba(255,255,255,0.12); }
95+
96+
.page-nav {
97+
position: fixed;
98+
bottom: 80px;
99+
left: 0; right: 0;
100+
display: flex;
101+
justify-content: space-between;
102+
padding: 0 20px;
103+
z-index: 9;
104+
pointer-events: none;
105+
}
106+
.page-nav a {
107+
pointer-events: auto;
108+
color: rgba(255,255,255,0.25);
109+
text-decoration: none;
110+
font-family: 'Courier New', monospace;
111+
font-size: 10px;
112+
letter-spacing: 1.5px;
113+
text-transform: uppercase;
114+
padding: 10px 18px;
115+
border: 1px solid rgba(255,255,255,0.06);
116+
border-radius: 8px;
117+
background: rgba(0,0,0,0.3);
118+
backdrop-filter: blur(8px);
119+
transition: all 0.3s;
120+
max-width: 200px;
121+
overflow: hidden;
122+
text-overflow: ellipsis;
123+
white-space: nowrap;
124+
}
125+
.page-nav a:hover {
126+
color: rgba(255,255,255,0.6);
127+
border-color: rgba(255,255,255,0.15);
128+
background: rgba(0,0,0,0.5);
129+
}
130+
.page-nav .nav-arrow {
131+
font-size: 14px;
132+
margin: 0 6px;
133+
}
95134
</style>
96135
</head>
97136
<body>
@@ -411,6 +450,10 @@ <h1>Aurora Borealis</h1>
411450
composer.setSize(innerWidth, innerHeight);
412451
});
413452
</script>
453+
<div class="page-nav">
454+
<a href="audio-terrain.html"><span class="nav-arrow">&larr;</span> Audio Terrain</a>
455+
<a href="bifurcation.html">Bifurcation <span class="nav-arrow">&rarr;</span></a>
456+
</div>
414457
<script src="shared-ui.js"></script>
415458
</body>
416459
</html>

‎bifurcation.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,45 @@
9292
font-family: monospace;
9393
}
9494
.zoom-btn:hover { background: rgba(255,255,255,0.12); }
95+
96+
.page-nav {
97+
position: fixed;
98+
bottom: 80px;
99+
left: 0; right: 0;
100+
display: flex;
101+
justify-content: space-between;
102+
padding: 0 20px;
103+
z-index: 9;
104+
pointer-events: none;
105+
}
106+
.page-nav a {
107+
pointer-events: auto;
108+
color: rgba(255,255,255,0.25);
109+
text-decoration: none;
110+
font-family: 'Courier New', monospace;
111+
font-size: 10px;
112+
letter-spacing: 1.5px;
113+
text-transform: uppercase;
114+
padding: 10px 18px;
115+
border: 1px solid rgba(255,255,255,0.06);
116+
border-radius: 8px;
117+
background: rgba(0,0,0,0.3);
118+
backdrop-filter: blur(8px);
119+
transition: all 0.3s;
120+
max-width: 200px;
121+
overflow: hidden;
122+
text-overflow: ellipsis;
123+
white-space: nowrap;
124+
}
125+
.page-nav a:hover {
126+
color: rgba(255,255,255,0.6);
127+
border-color: rgba(255,255,255,0.15);
128+
background: rgba(0,0,0,0.5);
129+
}
130+
.page-nav .nav-arrow {
131+
font-size: 14px;
132+
margin: 0 6px;
133+
}
95134
</style>
96135
</head>
97136
<body>
@@ -436,6 +475,10 @@ <h1>Bifurcation</h1>
436475
composer.setSize(innerWidth, innerHeight);
437476
});
438477
</script>
478+
<div class="page-nav">
479+
<a href="aurora.html"><span class="nav-arrow">&larr;</span> Aurora</a>
480+
<a href="black-hole.html">Black Hole <span class="nav-arrow">&rarr;</span></a>
481+
</div>
439482
<script src="shared-ui.js"></script>
440483
</body>
441484
</html>

0 commit comments

Comments
 (0)