index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://glslplayground.scroll.pub
+ metaTags
+ editButton /edit.html
+ title GLSL Playground - Realtime Shader Editor
+ style.css
+ header
+ class hero
+ nav
+ div GLSL Playground
+ class logo
+ div
+ class nav-links
+ a Docs
+ href #docs
+ a Examples
+ href #examples
+ a Edit
+ href edit.html
+ a GitHub
+ class cta-button
+ href https://github.com/glsl-playground
+ div
+ class hero-content
+ h1 GLSL Playground
+ p Write, edit, and preview GLSL shaders in realtime
+ a Start Coding
+ class primary-button
+ href #editor
+ main
+ section
+ id editor
+ class editor-section
+ div
+ class editor-grid
+ div
+ class code-editor
+ textarea
+ id glsl-code
+ placeholder Write your GLSL code here...
+ div
+ class preview-canvas
+ canvas
+ id shader-canvas
+ section
+ id examples
+ class examples-section
+ h2 Example Shaders
+ div
+ class example-grid
+ div
+ class example-card
+ h3 Gradient
+ pre
+ class example-code
+ div
+ class example-card
+ h3 Noise
+ pre
+ class example-code
+ div
+ class example-card
+ h3 Fractal
+ pre
+ class example-code
+ section
+ id docs
+ class docs-section
+ h2 Documentation
+ div
+ class docs-content
+ h3 Getting Started
+ p Write GLSL code in the editor and see realtime results in the preview canvas.
+ h3 Built-in Uniforms
+ p The following uniforms are automatically provided:
+ pre
+ class docs-code
+ footer
+ div
+ class footer-content
+ div
+ class footer-links
+ a Docs
+ href #docs
+ a Examples
+ href #examples
+ a GitHub
+ href https://github.com/glsl-playground
+ p Created with ❤️ by the GLSL community
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "47f3e2cb-270c-4d01-a09e-3de7b27ca9d7",
+ "object": "chat.completion",
+ "created": 1737392127,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\nglslplayground.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://glslplayground.scroll.pub\nmetaTags\neditButton /edit.html\ntitle GLSL Playground - Realtime Shader Editor\nstyle.css\nheader\n class hero\n nav\n div GLSL Playground\n class logo\n div\n class nav-links\n a Docs\n href #docs\n a Examples\n href #examples\n a Edit\n href edit.html\n a GitHub\n class cta-button\n href https://github.com/glsl-playground\n div\n class hero-content\n h1 GLSL Playground\n p Write, edit, and preview GLSL shaders in realtime\n a Start Coding\n class primary-button\n href #editor\nmain\n section\n id editor\n class editor-section\n div\n class editor-grid\n div\n class code-editor\n textarea\n id glsl-code\n placeholder Write your GLSL code here...\n div\n class preview-canvas\n canvas\n id shader-canvas\n section\n id examples\n class examples-section\n h2 Example Shaders\n div\n class example-grid\n div\n class example-card\n h3 Gradient\n pre\n class example-code\n div\n class example-card\n h3 Noise\n pre\n class example-code\n div\n class example-card\n h3 Fractal\n pre\n class example-code\n section\n id docs\n class docs-section\n h2 Documentation\n div\n class docs-content\n h3 Getting Started\n p Write GLSL code in the editor and see realtime results in the preview canvas.\n h3 Built-in Uniforms\n p The following uniforms are automatically provided:\n pre\n class docs-code\nfooter\n div\n class footer-content\n div\n class footer-links\n a Docs\n href #docs\n a Examples\n href #examples\n a GitHub\n href https://github.com/glsl-playground\n p Created with ❤️ by the GLSL community\nscript.js\n---style.css---\n:root {\n --primary: #6366f1;\n --primary-hover: #4f46e5;\n --background: #0f172a;\n --surface: #1e293b;\n --text: #f8fafc;\n --muted: #94a3b8;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Inter', sans-serif;\n background: var(--background);\n color: var(--text);\n line-height: 1.6;\n}\n\n.hero {\n background: var(--surface);\n padding: 2rem 1rem;\n text-align: center;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: 600;\n color: var(--primary);\n}\n\n.nav-links {\n display: flex;\n justify-content: center;\n gap: 1rem;\n margin-top: 1rem;\n}\n\n.hero-content {\n max-width: 800px;\n margin: 2rem auto;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.primary-button {\n display: inline-block;\n padding: 0.75rem 1.5rem;\n background: var(--primary);\n color: white;\n border-radius: 0.5rem;\n text-decoration: none;\n transition: background 0.2s;\n}\n\n.primary-button:hover {\n background: var(--primary-hover);\n}\n\n.editor-section {\n padding: 2rem 1rem;\n}\n\n.editor-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.code-editor {\n background: var(--surface);\n border-radius: 0.5rem;\n padding: 1rem;\n}\n\ntextarea {\n width: 100%;\n height: 400px;\n background: transparent;\n border: none;\n color: var(--text);\n font-family: 'Fira Code', monospace;\n resize: none;\n}\n\n.preview-canvas {\n background: var(--surface);\n border-radius: 0.5rem;\n overflow: hidden;\n}\n\ncanvas {\n width: 100%;\n height: 400px;\n}\n\n.examples-section {\n padding: 2rem 1rem;\n background: var(--surface);\n}\n\n.example-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 1rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.example-card {\n background: var(--background);\n padding: 1rem;\n border-radius: 0.5rem;\n}\n\n.docs-section {\n padding: 2rem 1rem;\n}\n\n.docs-content {\n max-width: 800px;\n margin: 0 auto;\n}\n\nfooter {\n background: var(--surface);\n padding: 2rem 1rem;\n text-align: center;\n}\n\n@media (max-width: 768px) {\n .editor-grid {\n grid-template-columns: 1fr;\n }\n \n h1 {\n font-size: 2rem;\n }\n}\n---script.js---\nconst canvas = document.getElementById('shader-canvas');\nconst gl = canvas.getContext('webgl');\nconst codeInput = document.getElementById('glsl-code');\n\nlet shaderProgram;\nlet vertexShader;\nlet fragmentShader;\n\nfunction compileShader(source, type) {\n const shader = gl.createShader(type);\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n \n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n console.error('Shader compilation error:', gl.getShaderInfoLog(shader));\n return null;\n }\n return shader;\n}\n\nfunction createProgram(vertexSource, fragmentSource) {\n vertexShader = compileShader(vertexSource, gl.VERTEX_SHADER);\n fragmentShader = compileShader(fragmentSource, gl.FRAGMENT_SHADER);\n \n shaderProgram = gl.createProgram();\n gl.attachShader(shaderProgram, vertexShader);\n gl.attachShader(shaderProgram, fragmentShader);\n gl.linkProgram(shaderProgram);\n \n if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {\n console.error('Program linking error:', gl.getProgramInfoLog(shaderProgram));\n }\n \n return shaderProgram;\n}\n\nfunction render() {\n if (!shaderProgram) return;\n \n const vertices = new Float32Array([\n -1, -1,\n 1, -1,\n -1, 1,\n 1, 1\n ]);\n \n const buffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);\n \n const positionLocation = gl.getAttribLocation(shaderProgram, 'a_position');\n gl.enableVertexAttribArray(positionLocation);\n gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);\n \n gl.useProgram(shaderProgram);\n gl.viewport(0, 0, canvas.width, canvas.height);\n gl.clear(gl.COLOR_BUFFER_BIT);\n gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n}\n\nfunction updateShader() {\n const vertexSource = `\n attribute vec2 a_position;\n void main() {\n gl_Position = vec4(a_position, 0, 1);\n }\n `;\n \n const fragmentSource = `\n precision highp float;\n uniform float u_time;\n uniform vec2 u_resolution;\n \n ${codeInput.value}\n \n void main() {\n vec2 uv = gl_FragCoord.xy / u_resolution;\n gl_FragColor = vec4(mainImage(uv), 1.0);\n }\n `;\n \n createProgram(vertexSource, fragmentSource);\n render();\n}\n\nfunction resizeCanvas() {\n canvas.width = canvas.clientWidth;\n canvas.height = canvas.clientHeight;\n render();\n}\n\nwindow.addEventListener('resize', resizeCanvas);\ncodeInput.addEventListener('input', updateShader);\n\n// Initial setup\nresizeCanvas();\nupdateShader();\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 723,
+ "completion_tokens": 1880,
+ "total_tokens": 2603,
+ "prompt_tokens_details": {
+ "cached_tokens": 0
+ },
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 723
+ },
+ "system_fingerprint": "fp_3a5770e1b4"
+ }
readme.scroll
Changed around line 1
+ # glslplayground.scroll.pub
+
+ Prompt: website
+ Agent: deepseek
+ Model: deepseek-chat
+
+ ## User prompt
+ GLSL editor with realtime preview
+
+ ## System prompt
+ You are an expert web developer. Create a website based on this request: "GLSL editor with realtime preview"
+
+ Requirements:
+ - Use only Scroll, CSS, and JavaScript (NO frameworks, NO external dependencies)
+ - Create clean, semantic HTML5
+ - Make it mobile-responsive
+ - Follow modern best practices and accessibility guidelines
+ - Keep it simple but professional
+ - Use only relative links and no external resources
+ - Do not put a copyright symbol or all rights reserved in the footer.
+ - Make it beautiful. Dazzling. Advanced used of CSS.
+
+ As a refresher, for doing the html body, Scroll is a whitespace based language that uses a single indented space to mark a line (aka particle) as a subparticle of a parent line.
+
+ For example:
+
+ header
+ class hero
+ nav
+ div Scroll
+ class logo
+ div
+ class nav-links
+ a Features
+ href #features
+ a Examples
+ href #examples
+ a Edit
+ href edit.html
+ a GitHub
+ class cta-button
+ href https://github.com/breck7/scroll
+ div
+ class hero-content
+ h1 Write Better with Scroll
+ p The extendible markup language that makes source beautiful and compiles to anything
+ a Get Started
+ class primary-button
+ href https://hub.scroll.pub/
+ main
+ section
+ id features
+ class features
+ h2 Why Scroll?
+ div
+ class feature-grid
+ div
+ class feature-card
+ div ⚡
+ class feature-icon
+ h3 Simple Syntax
+ p Like Markdown, but more powerful. No parentheses needed.
+ div
+ class feature-card
+ div 🧩
+ class feature-icon
+ h3 Extendible
+ p Build your own custom parsers.
+ div
+ class feature-card
+ div 🎨
+ class feature-icon
+ h3 Beautiful Output
+ p Create stunning documents with minimal effort.
+ div
+ class feature-card
+ div 🚀
+ class feature-icon
+ h3 Fast & Light
+ p Built on the efficient PPS Stack.
+ section
+ id examples
+ class code-demo
+ h2 See It In Action
+ div
+ class code-container
+ pre
+ class code-example
+ div
+ class code-output
+ footer
+ div
+ class footer-content
+ div
+ class footer-links
+ a Documentation
+ href https://scroll.pub/tutorial.html
+ a Community
+ href https://www.reddit.com/r/WorldWideScroll/
+ a Blog
+ href https://scroll.pub/blog
+ p Started by Breck Yunits. Evolved by a community.
+ https://twitter.com/breckyunits Breck Yunits
+ https://github.com/breck7/scroll/graphs/contributors community
+
+
+ First suggest a short, memorable domain name ending in scroll.pub that represents this website. Then provide the website files. Use this exact format:
+
+ ---domain---
+ (domainscroll.pub here)
+ ---index.scroll---
+ buildHtml
+ baseUrl https://(domainscroll.pub here)
+ metaTags
+ editButton /edit.html
+ title (Title here)
+ style.css
+
+ (body content here. no blank lines please.)
+
+ script.js
+ ---style.css---
+ (CSS content here)
+ ---script.js---
+ (JavaScript content here)
+ ---end---
script.js
Changed around line 1
+ const canvas = document.getElementById('shader-canvas');
+ const gl = canvas.getContext('webgl');
+ const codeInput = document.getElementById('glsl-code');
+
+ let shaderProgram;
+ let vertexShader;
+ let fragmentShader;
+
+ function compileShader(source, type) {
+ const shader = gl.createShader(type);
+ gl.shaderSource(shader, source);
+ gl.compileShader(shader);
+
+ if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+ console.error('Shader compilation error:', gl.getShaderInfoLog(shader));
+ return null;
+ }
+ return shader;
+ }
+
+ function createProgram(vertexSource, fragmentSource) {
+ vertexShader = compileShader(vertexSource, gl.VERTEX_SHADER);
+ fragmentShader = compileShader(fragmentSource, gl.FRAGMENT_SHADER);
+
+ shaderProgram = gl.createProgram();
+ gl.attachShader(shaderProgram, vertexShader);
+ gl.attachShader(shaderProgram, fragmentShader);
+ gl.linkProgram(shaderProgram);
+
+ if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+ console.error('Program linking error:', gl.getProgramInfoLog(shaderProgram));
+ }
+
+ return shaderProgram;
+ }
+
+ function render() {
+ if (!shaderProgram) return;
+
+ const vertices = new Float32Array([
+ -1, -1,
+ 1, -1,
+ -1, 1,
+ 1, 1
+ ]);
+
+ const buffer = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+ gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+
+ const positionLocation = gl.getAttribLocation(shaderProgram, 'a_position');
+ gl.enableVertexAttribArray(positionLocation);
+ gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+
+ gl.useProgram(shaderProgram);
+ gl.viewport(0, 0, canvas.width, canvas.height);
+ gl.clear(gl.COLOR_BUFFER_BIT);
+ gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+ }
+
+ function updateShader() {
+ const vertexSource = `
+ attribute vec2 a_position;
+ void main() {
+ gl_Position = vec4(a_position, 0, 1);
+ }
+ `;
+
+ const fragmentSource = `
+ precision highp float;
+ uniform float u_time;
+ uniform vec2 u_resolution;
+
+ ${codeInput.value}
+
+ void main() {
+ vec2 uv = gl_FragCoord.xy / u_resolution;
+ gl_FragColor = vec4(mainImage(uv), 1.0);
+ }
+ `;
+
+ createProgram(vertexSource, fragmentSource);
+ render();
+ }
+
+ function resizeCanvas() {
+ canvas.width = canvas.clientWidth;
+ canvas.height = canvas.clientHeight;
+ render();
+ }
+
+ window.addEventListener('resize', resizeCanvas);
+ codeInput.addEventListener('input', updateShader);
+
+ // Initial setup
+ resizeCanvas();
+ updateShader();
style.css
Changed around line 1
+ :root {
+ --primary: #6366f1;
+ --primary-hover: #4f46e5;
+ --background: #0f172a;
+ --surface: #1e293b;
+ --text: #f8fafc;
+ --muted: #94a3b8;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Inter', sans-serif;
+ background: var(--background);
+ color: var(--text);
+ line-height: 1.6;
+ }
+
+ .hero {
+ background: var(--surface);
+ padding: 2rem 1rem;
+ text-align: center;
+ }
+
+ .logo {
+ font-size: 1.5rem;
+ font-weight: 600;
+ color: var(--primary);
+ }
+
+ .nav-links {
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+ margin-top: 1rem;
+ }
+
+ .hero-content {
+ max-width: 800px;
+ margin: 2rem auto;
+ }
+
+ h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+ }
+
+ .primary-button {
+ display: inline-block;
+ padding: 0.75rem 1.5rem;
+ background: var(--primary);
+ color: white;
+ border-radius: 0.5rem;
+ text-decoration: none;
+ transition: background 0.2s;
+ }
+
+ .primary-button:hover {
+ background: var(--primary-hover);
+ }
+
+ .editor-section {
+ padding: 2rem 1rem;
+ }
+
+ .editor-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ .code-editor {
+ background: var(--surface);
+ border-radius: 0.5rem;
+ padding: 1rem;
+ }
+
+ textarea {
+ width: 100%;
+ height: 400px;
+ background: transparent;
+ border: none;
+ color: var(--text);
+ font-family: 'Fira Code', monospace;
+ resize: none;
+ }
+
+ .preview-canvas {
+ background: var(--surface);
+ border-radius: 0.5rem;
+ overflow: hidden;
+ }
+
+ canvas {
+ width: 100%;
+ height: 400px;
+ }
+
+ .examples-section {
+ padding: 2rem 1rem;
+ background: var(--surface);
+ }
+
+ .example-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 1rem;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ .example-card {
+ background: var(--background);
+ padding: 1rem;
+ border-radius: 0.5rem;
+ }
+
+ .docs-section {
+ padding: 2rem 1rem;
+ }
+
+ .docs-content {
+ max-width: 800px;
+ margin: 0 auto;
+ }
+
+ footer {
+ background: var(--surface);
+ padding: 2rem 1rem;
+ text-align: center;
+ }
+
+ @media (max-width: 768px) {
+ .editor-grid {
+ grid-template-columns: 1fr;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+ }