commit 4956755707422bb64bdd239fcc875cd0d1139433
Author: root <root@hub.scroll.pub>
Date: 2025-01-17 23:34:47 +0000
Subject: Initial commit
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..0f5d1fb
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,63 @@
+buildHtml
+baseUrl https://wacky.scroll.pub
+metaTags
+editButton /edit.html
+title Wacky Text Wonderland
+style.css
+header
+ class hero-header
+ h1 Wacky Text Wonderland
+ class rainbow-text
+ p Transform your boring text into something extraordinary!
+ class bouncing-text
+main
+ section
+ class text-playground
+ div
+ class effect-container
+ h2 Glitch Effect
+ class glitch-text
+ data-text Glitch Effect
+ h2 Wavy Text
+ class wave-text
+ data-text Wavy Text
+ h2 3D Pop
+ class pop-text
+ data-text 3D Pop
+ section
+ class interactive-demo
+ h2 Try It Yourself!
+ div
+ class input-container
+ label Enter your text:
+ for user-text
+ input
+ type text
+ id user-text
+ placeholder Type something fun...
+ div
+ class effect-buttons
+ button Glitch It!
+ class effect-btn
+ data-effect glitch
+ button Wave It!
+ class effect-btn
+ data-effect wave
+ button Pop It!
+ class effect-btn
+ data-effect pop
+ div
+ class preview-box
+ p Your text will appear here
+ id preview-text
+footer
+ nav
+ class footer-nav
+ a Home
+ href #
+ a Effects
+ href #effects
+ a About
+ href #about
+ p Made with ✨ for text enthusiasts
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..0783dfb
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01BvR8723zrrgcrWS4CpZgYw",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a fun website with wacky text effects. For the domain, I suggest:\n\n---domain---\nwacky.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://wacky.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Wacky Text Wonderland\nstyle.css\nheader\n class hero-header\n h1 Wacky Text Wonderland\n class rainbow-text\n p Transform your boring text into something extraordinary!\n class bouncing-text\nmain\n section\n class text-playground\n div\n class effect-container\n h2 Glitch Effect\n class glitch-text\n data-text Glitch Effect\n h2 Wavy Text\n class wave-text\n data-text Wavy Text\n h2 3D Pop\n class pop-text\n data-text 3D Pop\n section\n class interactive-demo\n h2 Try It Yourself!\n div\n class input-container\n label Enter your text:\n for user-text\n input\n type text\n id user-text\n placeholder Type something fun...\n div\n class effect-buttons\n button Glitch It!\n class effect-btn\n data-effect glitch\n button Wave It!\n class effect-btn\n data-effect wave\n button Pop It!\n class effect-btn\n data-effect pop\n div\n class preview-box\n p Your text will appear here\n id preview-text\nfooter\n nav\n class footer-nav\n a Home\n href #\n a Effects\n href #effects\n a About\n href #about\n p Made with ✨ for text enthusiasts\nscript.js\n---style.css---\n:root {\n --primary-color: #ff6b6b;\n --secondary-color: #4ecdc4;\n --dark-color: #2c3e50;\n --light-color: #f7f9fc;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n background: var(--light-color);\n color: var(--dark-color);\n}\n\n.hero-header {\n min-height: 60vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n background: linear-gradient(135deg, #6c5ce7, #a363d9);\n padding: 2rem;\n text-align: center;\n}\n\n.rainbow-text {\n font-size: 4rem;\n background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);\n background-size: 200%;\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: rainbow 2s linear infinite;\n}\n\n.bouncing-text {\n font-size: 1.5rem;\n color: white;\n animation: bounce 1s ease infinite;\n}\n\n.glitch-text {\n position: relative;\n font-size: 3rem;\n font-weight: bold;\n text-transform: uppercase;\n text-shadow: 0.05em 0 0 rgba(255,0,0,.75),\n -0.025em -0.05em 0 rgba(0,255,0,.75),\n 0.025em 0.05em 0 rgba(0,0,255,.75);\n animation: glitch 500ms infinite;\n}\n\n.wave-text {\n font-size: 3rem;\n animation: wave 2s ease-in-out infinite;\n}\n\n.pop-text {\n font-size: 3rem;\n transform-style: preserve-3d;\n animation: pop 1s ease infinite;\n}\n\n.text-playground {\n padding: 4rem 2rem;\n display: grid;\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.effect-container {\n display: grid;\n gap: 3rem;\n text-align: center;\n}\n\n.interactive-demo {\n background: white;\n padding: 2rem;\n border-radius: 1rem;\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\n margin: 2rem auto;\n max-width: 800px;\n}\n\n.input-container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.effect-buttons {\n display: flex;\n gap: 1rem;\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.effect-btn {\n padding: 0.5rem 1rem;\n border: none;\n border-radius: 0.5rem;\n background: var(--primary-color);\n color: white;\n cursor: pointer;\n transition: transform 0.2s;\n}\n\n.effect-btn:hover {\n transform: translateY(-2px);\n}\n\n.preview-box {\n margin-top: 2rem;\n padding: 2rem;\n border: 2px dashed var(--secondary-color);\n border-radius: 1rem;\n min-height: 100px;\n}\n\n@keyframes rainbow {\n 0% { background-position: 0% 50%; }\n 100% { background-position: 200% 50%; }\n}\n\n@keyframes bounce {\n 50% { transform: translateY(-20px); }\n}\n\n@keyframes glitch {\n 0% { text-shadow: 0.05em 0 0 rgba(255,0,0,.75),\n -0.025em -0.05em 0 rgba(0,255,0,.75),\n 0.025em 0.05em 0 rgba(0,0,255,.75); }\n 14% { text-shadow: 0.05em 0 0 rgba(255,0,0,.75),\n -0.025em -0.05em 0 rgba(0,255,0,.75),\n 0.025em 0.05em 0 rgba(0,0,255,.75); }\n 15% { text-shadow: -0.05em -0.025em 0 rgba(255,0,0,.75),\n 0.025em 0.025em 0 rgba(0,255,0,.75),\n -0.05em -0.05em 0 rgba(0,0,255,.75); }\n 49% { text-shadow: -0.05em -0.025em 0 rgba(255,0,0,.75),\n 0.025em 0.025em 0 rgba(0,255,0,.75),\n -0.05em -0.05em 0 rgba(0,0,255,.75); }\n 50% { text-shadow: 0.025em 0.05em 0 rgba(255,0,0,.75),\n 0.05em 0 0 rgba(0,255,0,.75),\n 0 -0.05em 0 rgba(0,0,255,.75); }\n 99% { text-shadow: 0.025em 0.05em 0 rgba(255,0,0,.75),\n 0.05em 0 0 rgba(0,255,0,.75),\n 0 -0.05em 0 rgba(0,0,255,.75); }\n 100% { text-shadow: -0.025em 0 0 rgba(255,0,0,.75),\n -0.025em -0.025em 0 rgba(0,255,0,.75),\n -0.025em -0.05em 0 rgba(0,0,255,.75); }\n}\n\n@keyframes wave {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-20px); }\n}\n\n@keyframes pop {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n}\n\n@media (max-width: 768px) {\n .rainbow-text {\n font-size: 2.5rem;\n }\n \n .effect-container > * {\n font-size: 2rem;\n }\n \n .effect-buttons {\n flex-direction: column;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const userInput = document.getElementById('user-text');\n const previewText = document.getElementById('preview-text');\n const effectButtons = document.querySelectorAll('.effect-btn');\n\n effectButtons.forEach(button => {\n button.addEventListener('click', () => {\n const effect = button.dataset.effect;\n const text = userInput.value || 'Type something!';\n \n previewText.className = ''; // Reset classes\n previewText.textContent = text;\n \n switch(effect) {\n case 'glitch':\n previewText.className = 'glitch-text';\n previewText.dataset.text = text;\n break;\n case 'wave':\n previewText.className = 'wave-text';\n break;\n case 'pop':\n previewText.className = 'pop-text';\n break;\n }\n });\n });\n\n // Add interactive hover effects\n const letters = document.querySelectorAll('.rainbow-text');\n letters.forEach(letter => {\n letter.addEventListener('mouseover', () => {\n letter.style.animationPlayState = 'paused';\n });\n letter.addEventListener('mouseout', () => {\n letter.style.animationPlayState = 'running';\n });\n });\n});\n---end---\n\nThis website features various text effects including rainbow text, glitch effects, wave animations, and 3D pop effects. It's interactive, allowing users to input their own text and apply different effects. The design is modern and playful while maintaining professionalism. It's fully responsive and includes smooth animations and transitions. The CSS uses modern features like CSS variables, flexbox, and grid layouts. The JavaScript is clean and modular, handling all interactive features without any external dependencies."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 826,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2652
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..1c50c0c
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# wacky.scroll.pub
+
+website generated by Claude from prompt: neato type of stuff with wacky text
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..f2bb626
--- /dev/null
+++ b/script.js
@@ -0,0 +1,39 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const userInput = document.getElementById('user-text');
+ const previewText = document.getElementById('preview-text');
+ const effectButtons = document.querySelectorAll('.effect-btn');
+
+ effectButtons.forEach(button => {
+ button.addEventListener('click', () => {
+ const effect = button.dataset.effect;
+ const text = userInput.value || 'Type something!';
+
+ previewText.className = ''; // Reset classes
+ previewText.textContent = text;
+
+ switch(effect) {
+ case 'glitch':
+ previewText.className = 'glitch-text';
+ previewText.dataset.text = text;
+ break;
+ case 'wave':
+ previewText.className = 'wave-text';
+ break;
+ case 'pop':
+ previewText.className = 'pop-text';
+ break;
+ }
+ });
+ });
+
+ // Add interactive hover effects
+ const letters = document.querySelectorAll('.rainbow-text');
+ letters.forEach(letter => {
+ letter.addEventListener('mouseover', () => {
+ letter.style.animationPlayState = 'paused';
+ });
+ letter.addEventListener('mouseout', () => {
+ letter.style.animationPlayState = 'running';
+ });
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..dc92193
--- /dev/null
+++ b/style.css
@@ -0,0 +1,183 @@
+:root {
+ --primary-color: #ff6b6b;
+ --secondary-color: #4ecdc4;
+ --dark-color: #2c3e50;
+ --light-color: #f7f9fc;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ background: var(--light-color);
+ color: var(--dark-color);
+}
+
+.hero-header {
+ min-height: 60vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background: linear-gradient(135deg, #6c5ce7, #a363d9);
+ padding: 2rem;
+ text-align: center;
+}
+
+.rainbow-text {
+ font-size: 4rem;
+ background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
+ background-size: 200%;
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ animation: rainbow 2s linear infinite;
+}
+
+.bouncing-text {
+ font-size: 1.5rem;
+ color: white;
+ animation: bounce 1s ease infinite;
+}
+
+.glitch-text {
+ position: relative;
+ font-size: 3rem;
+ font-weight: bold;
+ text-transform: uppercase;
+ text-shadow: 0.05em 0 0 rgba(255,0,0,.75),
+ -0.025em -0.05em 0 rgba(0,255,0,.75),
+ 0.025em 0.05em 0 rgba(0,0,255,.75);
+ animation: glitch 500ms infinite;
+}
+
+.wave-text {
+ font-size: 3rem;
+ animation: wave 2s ease-in-out infinite;
+}
+
+.pop-text {
+ font-size: 3rem;
+ transform-style: preserve-3d;
+ animation: pop 1s ease infinite;
+}
+
+.text-playground {
+ padding: 4rem 2rem;
+ display: grid;
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.effect-container {
+ display: grid;
+ gap: 3rem;
+ text-align: center;
+}
+
+.interactive-demo {
+ background: white;
+ padding: 2rem;
+ border-radius: 1rem;
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+ margin: 2rem auto;
+ max-width: 800px;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.effect-buttons {
+ display: flex;
+ gap: 1rem;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.effect-btn {
+ padding: 0.5rem 1rem;
+ border: none;
+ border-radius: 0.5rem;
+ background: var(--primary-color);
+ color: white;
+ cursor: pointer;
+ transition: transform 0.2s;
+}
+
+.effect-btn:hover {
+ transform: translateY(-2px);
+}
+
+.preview-box {
+ margin-top: 2rem;
+ padding: 2rem;
+ border: 2px dashed var(--secondary-color);
+ border-radius: 1rem;
+ min-height: 100px;
+}
+
+@keyframes rainbow {
+ 0% { background-position: 0% 50%; }
+ 100% { background-position: 200% 50%; }
+}
+
+@keyframes bounce {
+ 50% { transform: translateY(-20px); }
+}
+
+@keyframes glitch {
+ 0% { text-shadow: 0.05em 0 0 rgba(255,0,0,.75),
+ -0.025em -0.05em 0 rgba(0,255,0,.75),
+ 0.025em 0.05em 0 rgba(0,0,255,.75); }
+ 14% { text-shadow: 0.05em 0 0 rgba(255,0,0,.75),
+ -0.025em -0.05em 0 rgba(0,255,0,.75),
+ 0.025em 0.05em 0 rgba(0,0,255,.75); }
+ 15% { text-shadow: -0.05em -0.025em 0 rgba(255,0,0,.75),
+ 0.025em 0.025em 0 rgba(0,255,0,.75),
+ -0.05em -0.05em 0 rgba(0,0,255,.75); }
+ 49% { text-shadow: -0.05em -0.025em 0 rgba(255,0,0,.75),
+ 0.025em 0.025em 0 rgba(0,255,0,.75),
+ -0.05em -0.05em 0 rgba(0,0,255,.75); }
+ 50% { text-shadow: 0.025em 0.05em 0 rgba(255,0,0,.75),
+ 0.05em 0 0 rgba(0,255,0,.75),
+ 0 -0.05em 0 rgba(0,0,255,.75); }
+ 99% { text-shadow: 0.025em 0.05em 0 rgba(255,0,0,.75),
+ 0.05em 0 0 rgba(0,255,0,.75),
+ 0 -0.05em 0 rgba(0,0,255,.75); }
+ 100% { text-shadow: -0.025em 0 0 rgba(255,0,0,.75),
+ -0.025em -0.025em 0 rgba(0,255,0,.75),
+ -0.025em -0.05em 0 rgba(0,0,255,.75); }
+}
+
+@keyframes wave {
+ 0%, 100% { transform: translateY(0); }
+ 50% { transform: translateY(-20px); }
+}
+
+@keyframes pop {
+ 0%, 100% { transform: scale(1); }
+ 50% { transform: scale(1.1); }
+}
+
+@media (max-width: 768px) {
+ .rainbow-text {
+ font-size: 2.5rem;
+ }
+
+ .effect-container > * {
+ font-size: 2rem;
+ }
+
+ .effect-buttons {
+ flex-direction: column;
+ }
+}
\ No newline at end of file