commit fe55b422a544e495b9f65143cd613fc35a31acfe
Author: root <root@hub.scroll.pub>
Date: 2024-12-29 00:23:34 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..df96e3b
--- /dev/null
+++ b/body.html
@@ -0,0 +1,13 @@
+<main>
+ <div class="hand-container">
+ <div class="hand">
+ <div class="finger thumb"></div>
+ <div class="finger index"></div>
+ <div class="finger middle"></div>
+ <div class="finger ring"></div>
+ <div class="finger pinky"></div>
+ <div class="palm"></div>
+ </div>
+ </div>
+ <div class="cursor"></div>
+</main>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..41300f1
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://handtrack.scroll.pub
+metaTags
+editButton /edit.html
+title 3D Hand Mouse Tracker
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..b94d7ed
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "id": "730b58bb-c2a6-40a7-b68e-287c14ca9b67",
+ "object": "chat.completion",
+ "created": 1735431800,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\nhandtrack.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://handtrack.scroll.pub\nmetaTags\neditButton /edit.html\ntitle 3D Hand Mouse Tracker\nstyle.css\nbody.html\nscript.js\n---body.html---\n<main>\n <div class=\"hand-container\">\n <div class=\"hand\">\n <div class=\"finger thumb\"></div>\n <div class=\"finger index\"></div>\n <div class=\"finger middle\"></div>\n <div class=\"finger ring\"></div>\n <div class=\"finger pinky\"></div>\n <div class=\"palm\"></div>\n </div>\n </div>\n <div class=\"cursor\"></div>\n</main>\n---style.css---\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n background: radial-gradient(circle, #1a1a1a, #000);\n min-height: 100vh;\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.hand-container {\n perspective: 1000px;\n transform-style: preserve-3d;\n}\n\n.hand {\n position: relative;\n width: 200px;\n height: 300px;\n transform-style: preserve-3d;\n transform: rotateX(60deg) rotateZ(-30deg);\n transition: transform 0.1s ease-out;\n}\n\n.finger {\n position: absolute;\n width: 20px;\n height: 100px;\n background: #ffcc99;\n border-radius: 10px;\n transform-origin: bottom center;\n box-shadow: 0 0 10px rgba(0,0,0,0.3);\n}\n\n.thumb {\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%) rotateZ(-45deg);\n}\n\n.index {\n left: 60%;\n top: 50%;\n transform: translate(-50%, -50%) rotateZ(-15deg);\n}\n\n.middle {\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n\n.ring {\n left: 40%;\n top: 50%;\n transform: translate(-50%, -50%) rotateZ(15deg);\n}\n\n.pinky {\n left: 30%;\n top: 50%;\n transform: translate(-50%, -50%) rotateZ(30deg);\n}\n\n.palm {\n position: absolute;\n width: 120px;\n height: 120px;\n background: #ffcc99;\n border-radius: 50%;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0 0 20px rgba(0,0,0,0.3);\n}\n\n.cursor {\n position: absolute;\n width: 20px;\n height: 20px;\n background: #fff;\n border-radius: 50%;\n pointer-events: none;\n box-shadow: 0 0 20px rgba(255,255,255,0.8);\n}\n\n@media (max-width: 768px) {\n .hand {\n transform: rotateX(60deg) rotateZ(-30deg) scale(0.7);\n }\n}\n---script.js---\nconst hand = document.querySelector('.hand');\nconst cursor = document.querySelector('.cursor');\n\ndocument.addEventListener('mousemove', (e) => {\n const x = e.clientX - window.innerWidth / 2;\n const y = e.clientY - window.innerHeight / 2;\n \n const angleX = (y / window.innerHeight) * 60;\n const angleY = -(x / window.innerWidth) * 60;\n \n hand.style.transform = `rotateX(${60 - angleX}deg) rotateY(${angleY}deg) rotateZ(-30deg)`;\n \n cursor.style.left = `${e.clientX}px`;\n cursor.style.top = `${e.clientY}px`;\n});\n\ndocument.addEventListener('touchmove', (e) => {\n const touch = e.touches[0];\n const x = touch.clientX - window.innerWidth / 2;\n const y = touch.clientY - window.innerHeight / 2;\n \n const angleX = (y / window.innerHeight) * 60;\n const angleY = -(x / window.innerWidth) * 60;\n \n hand.style.transform = `rotateX(${60 - angleX}deg) rotateY(${angleY}deg) rotateZ(-30deg)`;\n \n cursor.style.left = `${touch.clientX}px`;\n cursor.style.top = `${touch.clientY}px`;\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 244,
+ "completion_tokens": 1034,
+ "total_tokens": 1278,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 244
+ },
+ "system_fingerprint": "fp_f1afce2943"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..de124c9
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# handtrack.scroll.pub
+Website generated by DeepSeek from prompt: 3D hand that tracks and points the mouse position
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..16d2d00
--- /dev/null
+++ b/script.js
@@ -0,0 +1,29 @@
+const hand = document.querySelector('.hand');
+const cursor = document.querySelector('.cursor');
+
+document.addEventListener('mousemove', (e) => {
+ const x = e.clientX - window.innerWidth / 2;
+ const y = e.clientY - window.innerHeight / 2;
+
+ const angleX = (y / window.innerHeight) * 60;
+ const angleY = -(x / window.innerWidth) * 60;
+
+ hand.style.transform = `rotateX(${60 - angleX}deg) rotateY(${angleY}deg) rotateZ(-30deg)`;
+
+ cursor.style.left = `${e.clientX}px`;
+ cursor.style.top = `${e.clientY}px`;
+});
+
+document.addEventListener('touchmove', (e) => {
+ const touch = e.touches[0];
+ const x = touch.clientX - window.innerWidth / 2;
+ const y = touch.clientY - window.innerHeight / 2;
+
+ const angleX = (y / window.innerHeight) * 60;
+ const angleY = -(x / window.innerWidth) * 60;
+
+ hand.style.transform = `rotateX(${60 - angleX}deg) rotateY(${angleY}deg) rotateZ(-30deg)`;
+
+ cursor.style.left = `${touch.clientX}px`;
+ cursor.style.top = `${touch.clientY}px`;
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..a746cad
--- /dev/null
+++ b/style.css
@@ -0,0 +1,96 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ background: radial-gradient(circle, #1a1a1a, #000);
+ min-height: 100vh;
+ overflow: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.hand-container {
+ perspective: 1000px;
+ transform-style: preserve-3d;
+}
+
+.hand {
+ position: relative;
+ width: 200px;
+ height: 300px;
+ transform-style: preserve-3d;
+ transform: rotateX(60deg) rotateZ(-30deg);
+ transition: transform 0.1s ease-out;
+}
+
+.finger {
+ position: absolute;
+ width: 20px;
+ height: 100px;
+ background: #ffcc99;
+ border-radius: 10px;
+ transform-origin: bottom center;
+ box-shadow: 0 0 10px rgba(0,0,0,0.3);
+}
+
+.thumb {
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%) rotateZ(-45deg);
+}
+
+.index {
+ left: 60%;
+ top: 50%;
+ transform: translate(-50%, -50%) rotateZ(-15deg);
+}
+
+.middle {
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.ring {
+ left: 40%;
+ top: 50%;
+ transform: translate(-50%, -50%) rotateZ(15deg);
+}
+
+.pinky {
+ left: 30%;
+ top: 50%;
+ transform: translate(-50%, -50%) rotateZ(30deg);
+}
+
+.palm {
+ position: absolute;
+ width: 120px;
+ height: 120px;
+ background: #ffcc99;
+ border-radius: 50%;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ box-shadow: 0 0 20px rgba(0,0,0,0.3);
+}
+
+.cursor {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ background: #fff;
+ border-radius: 50%;
+ pointer-events: none;
+ box-shadow: 0 0 20px rgba(255,255,255,0.8);
+}
+
+@media (max-width: 768px) {
+ .hand {
+ transform: rotateX(60deg) rotateZ(-30deg) scale(0.7);
+ }
+}
\ No newline at end of file