1 files changed, 32 insertions, 8 deletions
diff --git a/client/src/animation.js b/client/src/animation.js
index 5be1a5f..0342d43 100644
--- a/client/src/animation.js
+++ b/client/src/animation.js
@@ -1,6 +1,13 @@
 import { h, Fragment, cloneElement } from 'preact';
 import { useState, useEffect, useRef, useMemo } from 'preact/hooks';
+import ColorHash from 'color-hash';
+import css from './ui/css.js';
 
+css`
+html { overflow: hidden; }
+`;
+
+const colors = new ColorHash({ lightness: 0.8 });
 const abs = Math.abs;
 const clamp = (val) => Math.max(0, Math.min(val, 1));
 const smoothstep = (min, max, value) => {
@@ -129,9 +136,9 @@ const AnimationRoot = ({ children, fallback, commit, interactionRef }) => {
 	return children.map((child) => child && cloneElement(child, { state }));
 };
 
-const Animatable = ({ state, offset, swipeI, children }) => {
+const Animatable = ({ state, offset, swipeI, color, children }) => {
 	const scroll = lag(state.scroll, 0.05) + offset.scroll;
-	const active = smoothstep(0.9, 0.1, abs(scroll));
+	const active = smoothstep(0.9, 0.1, abs(scroll)) * 2;
 	const activeB = offset.scroll === 0; 
 	const swipe = lag(state[['swipe', swipeI]] ?? 0, 0.05) + offset.swipe;
 
@@ -144,7 +151,7 @@ const Animatable = ({ state, offset, swipeI, children }) => {
 				margin: 'auto',
 				width: '240px',
 				height: '240px',
-				background: 'red',
+				background: color,
 				border: `${active * 5}px solid green`,
 				boxSizing: 'border-box',
 
@@ -161,9 +168,25 @@ const Animatable = ({ state, offset, swipeI, children }) => {
 	);
 };
 
+const make = (prefix, length) => Array.from(
+  { length },
+  (_, i) => ({
+    content: `${prefix} ${i}`,
+    color: colors.hex(prefix),
+  }),
+);
+
 const data = [
-	'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
-].map(l => [l+'1', l+'2', l+'3', l+'4']);
+  make('A', 3),
+  make('B', 2),
+  make('C', 7),
+  make('D', 2),
+  make('E', 2),
+  make('F', 3),
+  make('G', 1),
+  make('H', 1),
+  make('I', 4),
+];
 
 const range = (n) => [...new Array(n).keys()];
 const grid = (w, h) => {
@@ -281,8 +304,8 @@ export const Main = () => {
 					interactionRef={interaction}
 					commit={commit}
 				>
-					{grid(5, 5).map(([scroll, swipe]) => {
-						scroll -= 2;
+					{grid(7, 5).map(([scroll, swipe]) => {
+						scroll -= 3;
 						swipe -= 2;
 
 						const swipeOffset = swipeOffsets[scroll+scrollOffset] ?? 0;
@@ -296,8 +319,9 @@ export const Main = () => {
 								key={d}
 								offset={{ scroll, swipe }}
 								swipeI={scroll+scrollOffset}
+								color={d.color}
 							>
-								{d}
+								{d.content}
 							</Animatable>
 						);
 					})}