diff --git a/package-lock.json b/package-lock.json
index 5ef0e3e..7587ed8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,9 @@
 		"": {
 			"name": "scrolltron",
 			"version": "0.0.1",
+			"dependencies": {
+				"svelte-color-picker": "^1.0.7"
+			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^1.0.0",
 				"@sveltejs/kit": "^1.0.0",
@@ -19,6 +22,7 @@
 				"prettier-plugin-svelte": "^2.8.1",
 				"svelte": "^3.54.0",
 				"svelte-check": "^2.9.2",
+				"svelte-ticker": "^1.0.0",
 				"tslib": "^2.4.1",
 				"typescript": "^4.9.3",
 				"vite": "^4.0.0"
@@ -1024,6 +1028,14 @@
 			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
 			"dev": true
 		},
+		"node_modules/console-clear": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/console-clear/-/console-clear-1.1.1.tgz",
+			"integrity": "sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/cookie": {
 			"version": "0.5.0",
 			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
@@ -1545,6 +1557,14 @@
 			"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
 			"dev": true
 		},
+		"node_modules/get-port": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz",
+			"integrity": "sha512-x5UJKlgeUiNT8nyo/AcnwLnZuZNcSjSw0kogRB+Whd1fjjFq4B1hySFxSFWWSn4mIBzg3sRNUDFYc4g5gjPoLg==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/glob": {
 			"version": "7.2.3",
 			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -1842,6 +1862,14 @@
 				"node": ">= 0.8.0"
 			}
 		},
+		"node_modules/local-access": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/local-access/-/local-access-1.1.0.tgz",
+			"integrity": "sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/locate-path": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -1967,7 +1995,6 @@
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
 			"integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
-			"dev": true,
 			"engines": {
 				"node": ">=4"
 			}
@@ -2353,7 +2380,6 @@
 			"version": "1.8.1",
 			"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
 			"integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
-			"dev": true,
 			"dependencies": {
 				"mri": "^1.1.0"
 			},
@@ -2441,6 +2467,62 @@
 				"node": ">= 10"
 			}
 		},
+		"node_modules/sirv-cli": {
+			"version": "0.4.6",
+			"resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-0.4.6.tgz",
+			"integrity": "sha512-/Vj85/kBvPL+n9ibgX6FicLE8VjidC1BhlX67PYPBfbBAphzR6i0k0HtU5c2arejfU3uzq8l3SYPCwl1x7z6Ww==",
+			"dependencies": {
+				"console-clear": "^1.1.0",
+				"get-port": "^3.2.0",
+				"kleur": "^3.0.0",
+				"local-access": "^1.0.1",
+				"sade": "^1.4.0",
+				"sirv": "^0.4.6",
+				"tinydate": "^1.0.0"
+			},
+			"bin": {
+				"sirv": "index.js"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/sirv-cli/node_modules/@polka/url": {
+			"version": "0.5.0",
+			"resolved": "https://registry.npmjs.org/@polka/url/-/url-0.5.0.tgz",
+			"integrity": "sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw=="
+		},
+		"node_modules/sirv-cli/node_modules/kleur": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+			"integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/sirv-cli/node_modules/mime": {
+			"version": "2.6.0",
+			"resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
+			"integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
+			"bin": {
+				"mime": "cli.js"
+			},
+			"engines": {
+				"node": ">=4.0.0"
+			}
+		},
+		"node_modules/sirv-cli/node_modules/sirv": {
+			"version": "0.4.6",
+			"resolved": "https://registry.npmjs.org/sirv/-/sirv-0.4.6.tgz",
+			"integrity": "sha512-rYpOXlNbpHiY4nVXxuDf4mXPvKz1reZGap/LkWp9TvcZ84qD/nPBjjH/6GZsgIjVMbOslnY8YYULAyP8jMn1GQ==",
+			"dependencies": {
+				"@polka/url": "^0.5.0",
+				"mime": "^2.3.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/slash": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -2581,6 +2663,14 @@
 				"svelte": "^3.24.0"
 			}
 		},
+		"node_modules/svelte-color-picker": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/svelte-color-picker/-/svelte-color-picker-1.0.7.tgz",
+			"integrity": "sha512-Xu5efoJKPEouO+rSLkbVR/0EI4ewzO2PgtapC7FdvPlYaCykdqm7YvsoTLaTSNdIljoBtHzNaYgtYxc/ThL5+w==",
+			"dependencies": {
+				"sirv-cli": "^0.4.4"
+			}
+		},
 		"node_modules/svelte-hmr": {
 			"version": "0.15.1",
 			"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.1.tgz",
@@ -2668,6 +2758,12 @@
 				"sourcemap-codec": "^1.4.8"
 			}
 		},
+		"node_modules/svelte-ticker": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/svelte-ticker/-/svelte-ticker-1.0.0.tgz",
+			"integrity": "sha512-rjbBd4HsMZj6pWEmpHA3Em704LGc4KIc/ZsA7u+Qmefdt8iIWCsgdnkP7rWefbGI16gw6La8xAIx/DntgXUHGA==",
+			"dev": true
+		},
 		"node_modules/text-table": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -2684,6 +2780,14 @@
 				"globrex": "^0.1.2"
 			}
 		},
+		"node_modules/tinydate": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz",
+			"integrity": "sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/to-regex-range": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
diff --git a/package.json b/package.json
index b86176c..fd2ab24 100644
--- a/package.json
+++ b/package.json
@@ -23,9 +23,13 @@
 		"prettier-plugin-svelte": "^2.8.1",
 		"svelte": "^3.54.0",
 		"svelte-check": "^2.9.2",
+		"svelte-ticker": "^1.0.0",
 		"tslib": "^2.4.1",
 		"typescript": "^4.9.3",
 		"vite": "^4.0.0"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"svelte-color-picker": "^1.0.7"
+	}
 }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5982b0a..22d1cfb 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,2 +1,43 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+
+
+<h1>Scrolltron</h1>
+
+<script>
+import Ticker from 'svelte-ticker';
+import {HsvPicker} from 'svelte-color-picker';
+
+function colorCallback(rgba) {
+	console.log(rgba.detail)
+}
+</script>
+
+<HsvPicker on:colorChange={colorCallback} startColor={"#FF00FF"}/>
+
+<div>
+<Ticker pausing=false>
+    <strong> foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo </strong>
+    <strong> barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr </strong>
+</Ticker>
+
+<Ticker pausing=false>
+    <strong> boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo </strong>
+    <strong> mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr </strong>
+</Ticker>
+</div>
+
+<style>
+	div { 
+		bottom: 0;
+		color: purple;
+		font-family: Verdana, sans-serif;
+		font-weight: 600;
+		font-size: 2.75em;
+		background: rgba(128, 255, 32, 0.25);
+	}
+	#div > :global(*) { display: inline-block!important; }
+
+
+	@keyframes horizontal {
+		100% { transform: translateX(-50%); }
+	}
+</style>