index.scroll
Changed around line 1
+ 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
prompt.json
Changed around line 1
+ {
+ "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
+ }
+ }
readme.scroll
Changed around line 1
+ # wacky.scroll.pub
+
+ website generated by Claude from prompt: neato type of stuff with wacky text
script.js
Changed around line 1
+ 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';
+ });
+ });
+ });
style.css
Changed around line 1
+ :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;
+ }
+ }