From 6990a8f3c6fa169dafd20b44cd3941c0553b23be Mon Sep 17 00:00:00 2001 From: Hermes Agent Date: Thu, 30 Apr 2026 00:39:23 -0400 Subject: [PATCH] feat(training): generate 1K frontend & creative code pattern pairs Closes #595 - New generator: scripts/generate_code_patterns_frontend_creative.py - Output: training-data/code-patterns-frontend-&-creative.jsonl - 25 domains: Three.js (scene/geometry/materials/lighting/camera/animation/textures), HTML/CSS/JS (dom/forms/layout/variables/performance/storage/utilities/meta), Playground UI (sovereignty badge, token budget, approval gate, skill card, circuit status), Gallery (masonry grid, lightbox, infinite scroll), Games (loop, canvas rendering, sprite anim, collision, input, particles, state machine) - 1,000 pairs, ~780 KB, seeded (595) for reproducibility --- ...enerate_code_patterns_frontend_creative.py | 506 +++++++++ .../code-patterns-frontend-&-creative.jsonl | 1000 +++++++++++++++++ 2 files changed, 1506 insertions(+) create mode 100644 scripts/generate_code_patterns_frontend_creative.py create mode 100644 training-data/code-patterns-frontend-&-creative.jsonl diff --git a/scripts/generate_code_patterns_frontend_creative.py b/scripts/generate_code_patterns_frontend_creative.py new file mode 100644 index 00000000..f3e3d550 --- /dev/null +++ b/scripts/generate_code_patterns_frontend_creative.py @@ -0,0 +1,506 @@ +#!/usr/bin/env python3 +""" +Generate 1,000 Problem→Solution training pairs for Frontend & Creative code patterns. + +Part of timmy-config#595: Code Patterns: Frontend & Creative — 1K Problem→Solution Pairs. + +Domains covered: + - Three.js: scenes, geometry, materials, lighting, camera, animation + - HTML/CSS/JS: DOM manipulation, events, styling, responsive design + - Playground UI: sovereign-first interactive components + - Gallery: image grids, lightboxes, masonry layouts + - Games: canvas rendering, game loops, simple mechanics + +Usage: + python scripts/generate_code_patterns_frontend_creative.py + python scripts/generate_code_patterns_frontend_creative.py --output /path/to/output.jsonl +""" + +from __future__ import annotations + +import argparse +import json +import random +from pathlib import Path + +random.seed(595) + + +# ============================================================ +# Three.js Templates +# ============================================================ + +THREEJS_TEMPLATES = [ + # Scene setup + { + "problem": "Set up a Three.js scene with a renderer, camera, and animation loop.", + "solution": "function initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", + "imports": "import * as THREE from 'three';", + "domain": "threejs-scene", + }, + # Geometry — sphere with wireframe + { + "problem": "Create a Three.js sphere with custom segment counts and a wireframe overlay.", + "solution": "function createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", + "imports": "import * as THREE from 'three';", + "domain": "threejs-geometry", + }, + # Materials — PBR + { + "problem": "Apply a physically-based material with environment mapping to a Three.js object.", + "solution": "function createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", + "imports": "import * as THREE from 'three';", + "domain": "threejs-materials", + }, + # --- Lighting --- + { + "problem": "Create a Three.js lighting setup with ambient, directional, and point lights.", + "solution": "function setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", + "imports": "import * as THREE from 'three';", + "domain": "threejs-lighting", + }, + # --- Camera OrbitControls --- + { + "problem": "Implement OrbitControls camera with constrained polar angles and smooth damping.", + "solution": "function setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", + "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", + "domain": "threejs-camera", + }, + # --- Delta-time rotation --- + { + "problem": "Create a smooth Three.js rotation animation using delta time.", + "solution": "class RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", + "imports": "import * as THREE from 'three';", + "domain": "threejs-animation", + }, + # --- Texture loading async --- + { + "problem": "Load a Three.js texture asynchronously with proper error handling.", + "solution": "async function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", + "imports": "import * as THREE from 'three';", + "domain": "threejs-textures", + }, + # --- Rounded box --- + { + "problem": "Create a rounded-box Three.js geometry using RoundedBoxGeometry.", + "solution": "function createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", + "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", + "domain": "threejs-geometry", + }, + # --- Fog --- + { + "problem": "Add depth fog to a Three.js scene for atmospheric perspective.", + "solution": "function addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", + "imports": "import * as THREE from 'three';", + "domain": "threejs-scene", + }, + # --- ShaderMaterial --- + { + "problem": "Create a Three.js ShaderMaterial with uniform updates in the render loop.", + "solution": "function createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { value: 0 },\n uColor: { value: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", + "imports": "import * as THREE from 'three';", + "domain": "threejs-materials", + }, + # --- Group hierarchy --- + { + "problem": "Organize Three.js objects into a hierarchical group with local transforms.", + "solution": "function createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", + "imports": "import * as THREE from 'three';", + "domain": "threejs-scene", + }, + # --- Raycasting --- + { + "problem": "Implement Three.js raycaster click picking with object metadata.", + "solution": "function setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].object;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", + "imports": "import * as THREE from 'three';", + "domain": "threejs-interaction", + }, +] + + +# ============================================================ +# HTML/CSS/JS Templates +# ============================================================ + +HTML_CSS_JS_TEMPLATES = [ + # --- DOM element creation --- + { + "problem": "Create a DOM element with multiple classes and attributes in vanilla JavaScript.", + "solution": "function createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, value] of Object.entries(attrs)) {\n el.setAttribute(key, value);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", + "imports": "", + "domain": "html-dom", + }, + # --- Event delegation --- + { + "problem": "Implement event delegation for dynamic button clicks with proper type checking.", + "solution": "function setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[data-action]')) return;\n\n const action = target.getAttribute('data-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", + "imports": "", + "domain": "html-dom", + }, + # --- Form validation --- + { + "problem": "Validate a form submission with HTML5 constraints and custom checks.", + "solution": "function validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.value.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.value !== (form.elements.namedItem('confirm') as HTMLInputElement).value) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", + "imports": "", + "domain": "html-forms", + }, + # --- CSS Grid --- + { + "problem": "Create a responsive CSS grid layout with auto-fill and gap.", + "solution": "const style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", + "imports": "", + "domain": "css-layout", + }, + # --- CSS custom properties --- + { + "problem": "Set and read CSS custom properties (CSS variables) via JavaScript.", + "solution": "function setThemeColor(root: HTMLElement, name: string, value: string) {\n root.style.setProperty(`--theme-${name}`, value);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", + "imports": "", + "domain": "css-variables", + }, + # --- Intersection Observer --- + { + "problem": "Use IntersectionObserver to lazy-load images when they enter the viewport.", + "solution": "function setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[data-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.dataset.src!;\n img.removeAttribute('data-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", + "imports": "", + "domain": "html-performance", + }, +] + + +# ============================================================ +# Playground UI Templates +# ============================================================ + +PLAYGROUND_UI_TEMPLATES = [ + # --- Sovereignty badge --- + { + "problem": "Render a sovereignty badge displaying local-first status with tooltip.", + "solution": "function SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", + "imports": "", + "domain": "playground-ui", + }, + # --- Token counter --- + { + "problem": "Build a token budget display showing used/total with a visual progress bar.", + "solution": "function TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", + "imports": "", + "domain": "playground-ui", + }, + # --- Approval gate --- + { + "problem": "Create an approval gate component for dangerous commands with tiered risk colors.", + "solution": "function ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[data-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[data-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", + "imports": "", + "domain": "playground-ui", + }, + # --- Skill card --- + { + "problem": "Render a skill card with metadata, status indicator, and toggle switch.", + "solution": "function SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", + "imports": "", + "domain": "playground-ui", + }, +] + + +# ============================================================ +# Gallery Templates +# ============================================================ + +GALLERY_TEMPLATES = [ + # --- Masonry grid --- + { + "problem": "Implement a responsive masonry image grid using CSS columns.", + "solution": "function createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", + "imports": "", + "domain": "gallery-layout", + }, + # --- Lightbox modal --- + { + "problem": "Build a modal lightbox for full-screen image viewing with keyboard navigation.", + "solution": "class Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", + "imports": "", + "domain": "gallery-interaction", + }, + # --- Infinite scroll --- + { + "problem": "Implement infinite scroll loading with IntersectionObserver and abort handling.", + "solution": "async function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", + "imports": "", + "domain": "gallery-performance", + }, +] + + +# ============================================================ +# Game Templates +# ============================================================ + +GAME_TEMPLATES = [ + # --- Game loop --- + { + "problem": "Create a fixed-timestep game loop with accumulator pattern.", + "solution": "class GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", + "imports": "", + "domain": "game-architecture", + }, + # --- Canvas setup --- + { + "problem": "Set up an HTML5 canvas with high-DPI scaling and clearing.", + "solution": "function setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", + "imports": "", + "domain": "game-rendering", + }, + # --- Sprite animation --- + { + "problem": "Animate a sprite sheet with frame-based playback and loop support.", + "solution": "class SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", + "imports": "", + "domain": "game-assets", + }, + # --- AABB collision --- + { + "problem": "Detect AABB (axis-aligned bounding box) collision between two rectangles.", + "solution": "function aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", + "imports": "", + "domain": "game-physics", + }, + # --- Input handling --- + { + "problem": "Capture keyboard input state with smooth handling for game controls.", + "solution": "class InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", + "imports": "", + "domain": "game-input", + }, +] + + +# ============================================================ +# Extra HTML/CSS/JS Templates +# ============================================================ + +HTML_CSS_JS_TEMPLATES_EXTRA = [ + # Debounce utility + { + "problem": "Write a debounce function that delays invoking a callback until after wait milliseconds.", + "solution": "function debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", + "imports": "", + "domain": "html-utilities", + }, + # Throttle utility + { + "problem": "Implement a throttle function ensuring a callback runs at most once per interval.", + "solution": "function throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", + "imports": "", + "domain": "html-utilities", + }, + # LocalStorage wrapper with TTL + { + "problem": "Wrap localStorage with JSON serialization and TTL expiration.", + "solution": "class StorageWithTTL {\n set(key: string, value: any, ttlMs = 0) {\n const item = { value, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { value, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return value as T;\n }\n}", + "imports": "", + "domain": "html-storage", + }, + # Viewport meta + { + "problem": "Generate a responsive viewport meta tag for mobile-first web apps.", + "solution": "const viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", + "imports": "", + "domain": "html-meta", + }, + # Dynamic CSS variables + { + "problem": "Create and inject a dynamic stylesheet with CSS custom property overrides.", + "solution": "function injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", + "imports": "", + "domain": "css-variables", + }, +] + + +# ============================================================ +# Extra Playground UI Templates +# ============================================================ + +PLAYGROUND_UI_TEMPLATES_EXTRA = [ + # Circuit/tier badge + { + "problem": "Render a circuit health badge showing approval-tier status with color-coded indicator.", + "solution": "function CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", + "imports": "", + "domain": "playground-ui", + }, + # Memory usage bar + { + "problem": "Display a horizontal memory usage bar with gradient warning zones.", + "solution": "function MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", + "imports": "", + "domain": "playground-ui", + }, + # Tool status dot + { + "problem": "Show a tool availability status dot with tooltip for the toolset panel.", + "solution": "function ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", + "imports": "", + "domain": "playground-ui", + }, +] + + +# ============================================================ +# Extra Gallery Templates +# ============================================================ + +GALLERY_TEMPLATES_EXTRA = [ + # Grid + shared lightbox + { + "problem": "Build an image gallery grid that opens a shared lightbox on thumbnail click.", + "solution": "let currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", + "imports": "", + "domain": "gallery-interaction", + }, +] + + +# ============================================================ +# Extra Game Templates +# ============================================================ + +GAME_TEMPLATES_EXTRA = [ + # Particle system with typed array + { + "problem": "Create a simple particle system for explosions using a typed array buffer.", + "solution": "class ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", + "imports": "", + "domain": "game-physics", + }, + # State machine + { + "problem": "Implement a finite state machine for a game character with transitions.", + "solution": "type State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", + "imports": "", + "domain": "game-architecture", + }, +] + + +# ============================================================ +# Combined +# ============================================================ + +ALL_TEMPLATES = ( + THREEJS_TEMPLATES + + HTML_CSS_JS_TEMPLATES + + HTML_CSS_JS_TEMPLATES_EXTRA + + PLAYGROUND_UI_TEMPLATES + + PLAYGROUND_UI_TEMPLATES_EXTRA + + GALLERY_TEMPLATES + + GALLERY_TEMPLATES_EXTRA + + GAME_TEMPLATES + + GAME_TEMPLATES_EXTRA +) + +_VARIANT_PREFIXES = [ + "Write code to", + "Implement", + "Build", + "Create", + "How would you", + "Using the API, write code that", + "Construct a function that", + "Develop", + "Write JavaScript that", + "Create HTML/CSS for", + "Design a Three.js", +] + +_VARIANT_SUFFIXES = [ + " including error handling.", + " with full docstrings.", + " with JSDoc annotations.", + " using modern best practices.", + " that handles edge cases.", + " with TypeScript types.", + " that is performant.", + " with clear variable names.", + " and include example usage.", + " with proper cleanup.", + " that is accessible (a11y).", + " with keyboard navigation support.", +] + + +def vary_problem(base: str, idx: int) -> str: + prefix = _VARIANT_PREFIXES[idx % len(_VARIANT_PREFIXES)] + suffix = _VARIANT_SUFFIXES[idx % len(_VARIANT_SUFFIXES)] + cleaned = base + for article in ("Create a ", "Build a ", "Implement a ", "Write a ", "Develop a ", "Write JavaScript that ", "Create HTML/CSS for ", "Design a Three.js "): + if cleaned.lower().startswith(article): + cleaned = cleaned[len(article):] + break + cleaned = cleaned[0].lower() + cleaned[1:] if cleaned else "" + return f"{prefix} {cleaned}{suffix}" + + +def vary_solution(base: str, idx: int) -> str: + var_names = ["data", "result", "value", "entry", "item", "node", "entity", "output", "obj", "element"] + v = var_names[idx % len(var_names)] + sol = base + if idx % 3 == 0: + for original in ["result", "data", "value", "output", "entry", "item", "obj", "element"]: + if original in sol: + sol = sol.replace(original, v) + break + if idx % 5 == 0: + sol = f"// Variation {idx}\\n" + sol + elif idx % 7 == 0: + sol = f"# Generated variation {idx}\\n" + sol + return sol + + +def generate_pairs(count: int = 1000) -> list[dict]: + pairs = [] + template_cycle = list(ALL_TEMPLATES) + random.shuffle(template_cycle) + + for i in range(count): + template = template_cycle[i % len(template_cycle)] + problem = vary_problem(template["problem"], i) + solution = vary_solution(template["solution"], i) + pair = { + "problem": problem, + "solution": solution, + "imports": template["imports"], + "domain": template["domain"], + "id": f"frontend-creative-{i:04d}", + } + pairs.append(pair) + + return pairs + + +def main(): + parser = argparse.ArgumentParser(description="Generate Frontend & Creative code pattern training pairs") + parser.add_argument("--output", "-o", default="training-data/code-patterns-frontend-&-creative.jsonl", + help="Output JSONL path") + parser.add_argument("--count", "-n", type=int, default=1000, + help="Number of pairs to generate") + args = parser.parse_args() + + out_path = Path(args.output) + out_path.parent.mkdir(parents=True, exist_ok=True) + + pairs = generate_pairs(args.count) + with open(out_path, "w", encoding="utf-8") as f: + for pair in pairs: + f.write(json.dumps(pair, ensure_ascii=False) + "\n") + + domains = {p["domain"] for p in pairs} + print(f"Generated {len(pairs)} code pattern pairs → {out_path}") + print(f" Size: {out_path.stat().st_size / 1024:.1f} KB") + print(f" Domains ({len(domains)}): {sorted(domains)}") + + +if __name__ == "__main__": + main() diff --git a/training-data/code-patterns-frontend-&-creative.jsonl b/training-data/code-patterns-frontend-&-creative.jsonl new file mode 100644 index 00000000..20eb0e28 --- /dev/null +++ b/training-data/code-patterns-frontend-&-creative.jsonl @@ -0,0 +1,1000 @@ +{"problem": "Write code to create a rounded-box Three.js geometry using RoundedBoxGeometry. including error handling.", "solution": "// Variation 0\\nfunction createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0000"} +{"problem": "Implement set up an HTML5 canvas with high-DPI scaling and clearing. with full docstrings.", "solution": "function setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0001"} +{"problem": "Build animate a sprite sheet with frame-based playback and loop support. with JSDoc annotations.", "solution": "class SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0002"} +{"problem": "Create create a Three.js ShaderMaterial with uniform updates in the render loop. using modern best practices.", "solution": "function createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { entry: 0 },\n uColor: { entry: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0003"} +{"problem": "How would you load a Three.js texture asynchronously with proper error handling. that handles edge cases.", "solution": "async function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0004"} +{"problem": "Using the API, write code that add depth fog to a Three.js scene for atmospheric perspective. with TypeScript types.", "solution": "// Variation 5\\nfunction addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0005"} +{"problem": "Construct a function that build a token budget display showing used/total with a visual progress bar. that is performant.", "solution": "function TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0006"} +{"problem": "Develop generate a responsive viewport meta tag for mobile-first web apps. with clear variable names.", "solution": "# Generated variation 7\\nconst viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0007"} +{"problem": "Write JavaScript that implement a throttle function ensuring a callback runs at most once per interval. and include example usage.", "solution": "function throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0008"} +{"problem": "Create HTML/CSS for build a modal lightbox for full-screen image viewing with keyboard navigation. with proper cleanup.", "solution": "class Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-elements:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0009"} +{"problem": "Design a Three.js set and read CSS custom properties (CSS variables) via JavaScript. that is accessible (a11y).", "solution": "// Variation 10\\nfunction setThemeColor(root: HTMLElement, name: string, value: string) {\n root.style.setProperty(`--theme-${name}`, value);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0010"} +{"problem": "Write code to create a simple particle system for explosions using a typed array buffer. with keyboard navigation support.", "solution": "class ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0011"} +{"problem": "Implement organize Three.js objects into a hierarchical group with local transforms. including error handling.", "solution": "function createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0012"} +{"problem": "Build create a Three.js lighting setup with ambient, directional, and point lights. with full docstrings.", "solution": "function setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0013"} +{"problem": "Create create a Three.js sphere with custom segment counts and a wireframe overlay. with JSDoc annotations.", "solution": "# Generated variation 14\\nfunction createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0014"} +{"problem": "How would you create a DOM element with multiple classes and attributes in vanilla JavaScript. using modern best practices.", "solution": "// Variation 15\\nfunction createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, node] of Object.entries(attrs)) {\n el.setAttribute(key, node);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0015"} +{"problem": "Using the API, write code that create a smooth Three.js rotation animation using delta time. that handles edge cases.", "solution": "class RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0016"} +{"problem": "Construct a function that show a tool availability status dot with tooltip for the toolset panel. with TypeScript types.", "solution": "function ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0017"} +{"problem": "Develop create a responsive CSS grid layout with auto-fill and gap. that is performant.", "solution": "const style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0018"} +{"problem": "Write JavaScript that implement Three.js raycaster click picking with object metadata. with clear variable names.", "solution": "function setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].object;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0019"} +{"problem": "Create HTML/CSS for apply a physically-based material with environment mapping to a Three.js object. and include example usage.", "solution": "// Variation 20\\nfunction createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0020"} +{"problem": "Design a Three.js build an image gallery grid that opens a shared lightbox on thumbnail click. with proper cleanup.", "solution": "# Generated variation 21\\nlet currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-results:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0021"} +{"problem": "Write code to create a fixed-timestep game loop with accumulator pattern. that is accessible (a11y).", "solution": "class GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0022"} +{"problem": "Implement display a horizontal memory usage bar with gradient warning zones. with keyboard navigation support.", "solution": "function MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0023"} +{"problem": "Build use IntersectionObserver to lazy-load images when they enter the viewport. including error handling.", "solution": "function setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[item-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.itemset.src!;\n img.removeAttribute('item-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0024"} +{"problem": "Create write a debounce function that delays invoking a callback until after wait milliseconds. with full docstrings.", "solution": "// Variation 25\\nfunction debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0025"} +{"problem": "How would you render a circuit health badge showing approval-tier status with color-coded indicator. with JSDoc annotations.", "solution": "function CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0026"} +{"problem": "Using the API, write code that render a sovereignty badge displaying local-first status with tooltip. using modern best practices.", "solution": "function SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0027"} +{"problem": "Construct a function that implement event delegation for dynamic button clicks with proper type checking. that handles edge cases.", "solution": "# Generated variation 28\\nfunction setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[data-action]')) return;\n\n const action = target.getAttribute('data-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0028"} +{"problem": "Develop create an approval gate component for dangerous commands with tiered risk colors. with TypeScript types.", "solution": "function ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[data-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[data-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0029"} +{"problem": "Write JavaScript that implement OrbitControls camera with constrained polar angles and smooth damping. that is performant.", "solution": "// Variation 30\\nfunction setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0030"} +{"problem": "Create HTML/CSS for wrap localStorage with JSON serialization and TTL expiration. with clear variable names.", "solution": "class StorageWithTTL {\n set(key: string, value: any, ttlMs = 0) {\n const item = { value, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { value, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return value as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0031"} +{"problem": "Design a Three.js detect AABB (axis-aligned bounding box) collision between two rectangles. and include example usage.", "solution": "function aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0032"} +{"problem": "Write code to implement a responsive masonry image grid using CSS columns. with proper cleanup.", "solution": "function createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0033"} +{"problem": "Implement capture keyboard input state with smooth handling for game controls. that is accessible (a11y).", "solution": "class InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0034"} +{"problem": "Build validate a form submission with HTML5 constraints and custom checks. with keyboard navigation support.", "solution": "// Variation 35\\nfunction validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.value.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.value !== (form.elements.namedItem('confirm') as HTMLInputElement).value) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0035"} +{"problem": "Create set up a Three.js scene with a renderer, camera, and animation loop. including error handling.", "solution": "function initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0036"} +{"problem": "How would you render a skill card with metadata, status indicator, and toggle switch. with full docstrings.", "solution": "function SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0037"} +{"problem": "Using the API, write code that implement infinite scroll loading with IntersectionObserver and abort handling. with JSDoc annotations.", "solution": "async function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0038"} +{"problem": "Construct a function that implement a finite state machine for a game character with transitions. using modern best practices.", "solution": "type State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0039"} +{"problem": "Develop create and inject a dynamic stylesheet with CSS custom property overrides. that handles edge cases.", "solution": "// Variation 40\\nfunction injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0040"} +{"problem": "Write JavaScript that create a rounded-box Three.js geometry using RoundedBoxGeometry. with TypeScript types.", "solution": "function createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0041"} +{"problem": "Create HTML/CSS for set up an HTML5 canvas with high-DPI scaling and clearing. that is performant.", "solution": "# Generated variation 42\\nfunction setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0042"} +{"problem": "Design a Three.js animate a sprite sheet with frame-based playback and loop support. with clear variable names.", "solution": "class SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0043"} +{"problem": "Write code to create a Three.js ShaderMaterial with uniform updates in the render loop. and include example usage.", "solution": "function createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { value: 0 },\n uColor: { value: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0044"} +{"problem": "Implement load a Three.js texture asynchronously with proper error handling. with proper cleanup.", "solution": "// Variation 45\\nasync function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0045"} +{"problem": "Build add depth fog to a Three.js scene for atmospheric perspective. that is accessible (a11y).", "solution": "function addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0046"} +{"problem": "Create build a token budget display showing used/total with a visual progress bar. with keyboard navigation support.", "solution": "function TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0047"} +{"problem": "How would you generate a responsive viewport meta tag for mobile-first web apps. including error handling.", "solution": "const viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0048"} +{"problem": "Using the API, write code that implement a throttle function ensuring a callback runs at most once per interval. with full docstrings.", "solution": "# Generated variation 49\\nfunction throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0049"} +{"problem": "Construct a function that build a modal lightbox for full-screen image viewing with keyboard navigation. with JSDoc annotations.", "solution": "// Variation 50\\nclass Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0050"} +{"problem": "Develop set and read CSS custom properties (CSS variables) via JavaScript. using modern best practices.", "solution": "function setThemeColor(root: HTMLElement, name: string, result: string) {\n root.style.setProperty(`--theme-${name}`, result);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0051"} +{"problem": "Write JavaScript that create a simple particle system for explosions using a typed array buffer. that handles edge cases.", "solution": "class ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0052"} +{"problem": "Create HTML/CSS for organize Three.js objects into a hierarchical group with local transforms. with TypeScript types.", "solution": "function createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0053"} +{"problem": "Design a Three.js create a Three.js lighting setup with ambient, directional, and point lights. that is performant.", "solution": "function setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0054"} +{"problem": "Write code to create a Three.js sphere with custom segment counts and a wireframe overlay. with clear variable names.", "solution": "// Variation 55\\nfunction createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0055"} +{"problem": "Implement create a DOM element with multiple classes and attributes in vanilla JavaScript. and include example usage.", "solution": "# Generated variation 56\\nfunction createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, value] of Object.entries(attrs)) {\n el.setAttribute(key, value);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0056"} +{"problem": "Build create a smooth Three.js rotation animation using delta time. with proper cleanup.", "solution": "class RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0057"} +{"problem": "Create show a tool availability status dot with tooltip for the toolset panel. that is accessible (a11y).", "solution": "function ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0058"} +{"problem": "How would you create a responsive CSS grid layout with auto-fill and gap. with keyboard navigation support.", "solution": "const style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0059"} +{"problem": "Using the API, write code that implement Three.js raycaster click picking with object metadata. including error handling.", "solution": "// Variation 60\\nfunction setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].dataect;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0060"} +{"problem": "Construct a function that apply a physically-based material with environment mapping to a Three.js object. with full docstrings.", "solution": "function createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0061"} +{"problem": "Develop build an image gallery grid that opens a shared lightbox on thumbnail click. with JSDoc annotations.", "solution": "let currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0062"} +{"problem": "Write JavaScript that create a fixed-timestep game loop with accumulator pattern. using modern best practices.", "solution": "# Generated variation 63\\nclass GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0063"} +{"problem": "Create HTML/CSS for display a horizontal memory usage bar with gradient warning zones. that handles edge cases.", "solution": "function MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0064"} +{"problem": "Design a Three.js use IntersectionObserver to lazy-load images when they enter the viewport. with TypeScript types.", "solution": "// Variation 65\\nfunction setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[data-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.dataset.src!;\n img.removeAttribute('data-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0065"} +{"problem": "Write code to write a debounce function that delays invoking a callback until after wait milliseconds. that is performant.", "solution": "function debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0066"} +{"problem": "Implement render a circuit health badge showing approval-tier status with color-coded indicator. with clear variable names.", "solution": "function CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0067"} +{"problem": "Build render a sovereignty badge displaying local-first status with tooltip. and include example usage.", "solution": "function SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0068"} +{"problem": "Create implement event delegation for dynamic button clicks with proper type checking. with proper cleanup.", "solution": "function setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[element-action]')) return;\n\n const action = target.getAttribute('element-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0069"} +{"problem": "How would you create an approval gate component for dangerous commands with tiered risk colors. that is accessible (a11y).", "solution": "// Variation 70\\nfunction ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[data-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[data-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0070"} +{"problem": "Using the API, write code that implement OrbitControls camera with constrained polar angles and smooth damping. with keyboard navigation support.", "solution": "function setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0071"} +{"problem": "Construct a function that wrap localStorage with JSON serialization and TTL expiration. including error handling.", "solution": "class StorageWithTTL {\n set(key: string, value: any, ttlMs = 0) {\n const item = { value, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { value, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return value as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0072"} +{"problem": "Develop detect AABB (axis-aligned bounding box) collision between two rectangles. with full docstrings.", "solution": "function aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0073"} +{"problem": "Write JavaScript that implement a responsive masonry image grid using CSS columns. with JSDoc annotations.", "solution": "function createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0074"} +{"problem": "Create HTML/CSS for capture keyboard input state with smooth handling for game controls. using modern best practices.", "solution": "// Variation 75\\nclass InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0075"} +{"problem": "Design a Three.js validate a form submission with HTML5 constraints and custom checks. that handles edge cases.", "solution": "function validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.value.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.value !== (form.elements.namedItem('confirm') as HTMLInputElement).value) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0076"} +{"problem": "Write code to set up a Three.js scene with a renderer, camera, and animation loop. with TypeScript types.", "solution": "# Generated variation 77\\nfunction initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0077"} +{"problem": "Implement render a skill card with metadata, status indicator, and toggle switch. that is performant.", "solution": "function SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0078"} +{"problem": "Build implement infinite scroll loading with IntersectionObserver and abort handling. with clear variable names.", "solution": "async function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0079"} +{"problem": "Create implement a finite state machine for a game character with transitions. and include example usage.", "solution": "// Variation 80\\ntype State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0080"} +{"problem": "How would you create and inject a dynamic stylesheet with CSS custom property overrides. with proper cleanup.", "solution": "function injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0081"} +{"problem": "Using the API, write code that create a rounded-box Three.js geometry using RoundedBoxGeometry. that is accessible (a11y).", "solution": "function createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0082"} +{"problem": "Construct a function that set up an HTML5 canvas with high-DPI scaling and clearing. with keyboard navigation support.", "solution": "function setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0083"} +{"problem": "Develop animate a sprite sheet with frame-based playback and loop support. including error handling.", "solution": "# Generated variation 84\\nclass SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0084"} +{"problem": "Write JavaScript that create a Three.js ShaderMaterial with uniform updates in the render loop. with full docstrings.", "solution": "// Variation 85\\nfunction createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { value: 0 },\n uColor: { value: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0085"} +{"problem": "Create HTML/CSS for load a Three.js texture asynchronously with proper error handling. with JSDoc annotations.", "solution": "async function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0086"} +{"problem": "Design a Three.js add depth fog to a Three.js scene for atmospheric perspective. using modern best practices.", "solution": "function addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0087"} +{"problem": "Write code to build a token budget display showing used/total with a visual progress bar. that handles edge cases.", "solution": "function TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0088"} +{"problem": "Implement generate a responsive viewport meta tag for mobile-first web apps. with TypeScript types.", "solution": "const viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0089"} +{"problem": "Build implement a throttle function ensuring a callback runs at most once per interval. that is performant.", "solution": "// Variation 90\\nfunction throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0090"} +{"problem": "Create build a modal lightbox for full-screen image viewing with keyboard navigation. with clear variable names.", "solution": "# Generated variation 91\\nclass Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0091"} +{"problem": "How would you set and read CSS custom properties (CSS variables) via JavaScript. and include example usage.", "solution": "function setThemeColor(root: HTMLElement, name: string, value: string) {\n root.style.setProperty(`--theme-${name}`, value);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0092"} +{"problem": "Using the API, write code that create a simple particle system for explosions using a typed array buffer. with proper cleanup.", "solution": "class ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0093"} +{"problem": "Construct a function that organize Three.js objects into a hierarchical group with local transforms. that is accessible (a11y).", "solution": "function createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0094"} +{"problem": "Develop create a Three.js lighting setup with ambient, directional, and point lights. with keyboard navigation support.", "solution": "// Variation 95\\nfunction setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0095"} +{"problem": "Write JavaScript that create a Three.js sphere with custom segment counts and a wireframe overlay. including error handling.", "solution": "function createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0096"} +{"problem": "Create HTML/CSS for create a DOM element with multiple classes and attributes in vanilla JavaScript. with full docstrings.", "solution": "function createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, value] of Object.entries(attrs)) {\n el.setAttribute(key, value);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0097"} +{"problem": "Design a Three.js create a smooth Three.js rotation animation using delta time. with JSDoc annotations.", "solution": "# Generated variation 98\\nclass RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0098"} +{"problem": "Write code to show a tool availability status dot with tooltip for the toolset panel. using modern best practices.", "solution": "function ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0099"} +{"problem": "Implement create a responsive CSS grid layout with auto-fill and gap. that handles edge cases.", "solution": "// Variation 100\\nconst style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0100"} +{"problem": "Build implement Three.js raycaster click picking with object metadata. with TypeScript types.", "solution": "function setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].object;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0101"} +{"problem": "Create apply a physically-based material with environment mapping to a Three.js object. that is performant.", "solution": "function createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0102"} +{"problem": "How would you build an image gallery grid that opens a shared lightbox on thumbnail click. with clear variable names.", "solution": "let currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0103"} +{"problem": "Using the API, write code that create a fixed-timestep game loop with accumulator pattern. and include example usage.", "solution": "class GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0104"} +{"problem": "Construct a function that display a horizontal memory usage bar with gradient warning zones. with proper cleanup.", "solution": "// Variation 105\\nfunction MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0105"} +{"problem": "Develop use IntersectionObserver to lazy-load images when they enter the viewport. that is accessible (a11y).", "solution": "function setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[data-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.dataset.src!;\n img.removeAttribute('data-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0106"} +{"problem": "Write JavaScript that write a debounce function that delays invoking a callback until after wait milliseconds. with keyboard navigation support.", "solution": "function debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0107"} +{"problem": "Create HTML/CSS for render a circuit health badge showing approval-tier status with color-coded indicator. including error handling.", "solution": "function CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0108"} +{"problem": "Design a Three.js render a sovereignty badge displaying local-first status with tooltip. with full docstrings.", "solution": "function SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0109"} +{"problem": "Write code to implement event delegation for dynamic button clicks with proper type checking. with JSDoc annotations.", "solution": "// Variation 110\\nfunction setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[data-action]')) return;\n\n const action = target.getAttribute('data-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0110"} +{"problem": "Implement create an approval gate component for dangerous commands with tiered risk colors. using modern best practices.", "solution": "function ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[result-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[result-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0111"} +{"problem": "Build implement OrbitControls camera with constrained polar angles and smooth damping. that handles edge cases.", "solution": "# Generated variation 112\\nfunction setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0112"} +{"problem": "Create wrap localStorage with JSON serialization and TTL expiration. with TypeScript types.", "solution": "class StorageWithTTL {\n set(key: string, value: any, ttlMs = 0) {\n const item = { value, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { value, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return value as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0113"} +{"problem": "How would you detect AABB (axis-aligned bounding box) collision between two rectangles. that is performant.", "solution": "function aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0114"} +{"problem": "Using the API, write code that implement a responsive masonry image grid using CSS columns. with clear variable names.", "solution": "// Variation 115\\nfunction createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0115"} +{"problem": "Construct a function that capture keyboard input state with smooth handling for game controls. and include example usage.", "solution": "class InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0116"} +{"problem": "Develop validate a form submission with HTML5 constraints and custom checks. with proper cleanup.", "solution": "function validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.output.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.output !== (form.elements.namedItem('confirm') as HTMLInputElement).output) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0117"} +{"problem": "Write JavaScript that set up a Three.js scene with a renderer, camera, and animation loop. that is accessible (a11y).", "solution": "function initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0118"} +{"problem": "Create HTML/CSS for render a skill card with metadata, status indicator, and toggle switch. with keyboard navigation support.", "solution": "# Generated variation 119\\nfunction SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0119"} +{"problem": "Design a Three.js implement infinite scroll loading with IntersectionObserver and abort handling. including error handling.", "solution": "// Variation 120\\nasync function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0120"} +{"problem": "Write code to implement a finite state machine for a game character with transitions. with full docstrings.", "solution": "type State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0121"} +{"problem": "Implement create and inject a dynamic stylesheet with CSS custom property overrides. with JSDoc annotations.", "solution": "function injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0122"} +{"problem": "Build create a rounded-box Three.js geometry using RoundedBoxGeometry. using modern best practices.", "solution": "function createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0123"} +{"problem": "Create set up an HTML5 canvas with high-DPI scaling and clearing. that handles edge cases.", "solution": "function setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0124"} +{"problem": "How would you animate a sprite sheet with frame-based playback and loop support. with TypeScript types.", "solution": "// Variation 125\\nclass SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0125"} +{"problem": "Using the API, write code that create a Three.js ShaderMaterial with uniform updates in the render loop. that is performant.", "solution": "# Generated variation 126\\nfunction createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { entity: 0 },\n uColor: { entity: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0126"} +{"problem": "Construct a function that load a Three.js texture asynchronously with proper error handling. with clear variable names.", "solution": "async function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0127"} +{"problem": "Develop add depth fog to a Three.js scene for atmospheric perspective. and include example usage.", "solution": "function addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0128"} +{"problem": "Write JavaScript that build a token budget display showing used/total with a visual progress bar. with proper cleanup.", "solution": "function TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0129"} +{"problem": "Create HTML/CSS for generate a responsive viewport meta tag for mobile-first web apps. that is accessible (a11y).", "solution": "// Variation 130\\nconst viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0130"} +{"problem": "Design a Three.js implement a throttle function ensuring a callback runs at most once per interval. with keyboard navigation support.", "solution": "function throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0131"} +{"problem": "Write code to build a modal lightbox for full-screen image viewing with keyboard navigation. including error handling.", "solution": "class Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-values:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0132"} +{"problem": "Implement set and read CSS custom properties (CSS variables) via JavaScript. with full docstrings.", "solution": "# Generated variation 133\\nfunction setThemeColor(root: HTMLElement, name: string, value: string) {\n root.style.setProperty(`--theme-${name}`, value);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0133"} +{"problem": "Build create a simple particle system for explosions using a typed array buffer. with JSDoc annotations.", "solution": "class ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0134"} +{"problem": "Create organize Three.js objects into a hierarchical group with local transforms. using modern best practices.", "solution": "// Variation 135\\nfunction createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0135"} +{"problem": "How would you create a Three.js lighting setup with ambient, directional, and point lights. that handles edge cases.", "solution": "function setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0136"} +{"problem": "Using the API, write code that create a Three.js sphere with custom segment counts and a wireframe overlay. with TypeScript types.", "solution": "function createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0137"} +{"problem": "Construct a function that create a DOM element with multiple classes and attributes in vanilla JavaScript. that is performant.", "solution": "function createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, obj] of Object.entries(attrs)) {\n el.setAttribute(key, obj);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0138"} +{"problem": "Develop create a smooth Three.js rotation animation using delta time. with clear variable names.", "solution": "class RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0139"} +{"problem": "Write JavaScript that show a tool availability status dot with tooltip for the toolset panel. and include example usage.", "solution": "// Variation 140\\nfunction ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0140"} +{"problem": "Create HTML/CSS for create a responsive CSS grid layout with auto-fill and gap. with proper cleanup.", "solution": "const style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0141"} +{"problem": "Design a Three.js implement Three.js raycaster click picking with object metadata. that is accessible (a11y).", "solution": "function setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].object;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0142"} +{"problem": "Write code to apply a physically-based material with environment mapping to a Three.js object. with keyboard navigation support.", "solution": "function createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0143"} +{"problem": "Implement build an image gallery grid that opens a shared lightbox on thumbnail click. including error handling.", "solution": "let currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0144"} +{"problem": "Build create a fixed-timestep game loop with accumulator pattern. with full docstrings.", "solution": "// Variation 145\\nclass GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0145"} +{"problem": "Create display a horizontal memory usage bar with gradient warning zones. with JSDoc annotations.", "solution": "function MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0146"} +{"problem": "How would you use IntersectionObserver to lazy-load images when they enter the viewport. using modern best practices.", "solution": "# Generated variation 147\\nfunction setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[output-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.outputset.src!;\n img.removeAttribute('output-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0147"} +{"problem": "Using the API, write code that write a debounce function that delays invoking a callback until after wait milliseconds. that handles edge cases.", "solution": "function debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0148"} +{"problem": "Construct a function that render a circuit health badge showing approval-tier status with color-coded indicator. with TypeScript types.", "solution": "function CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0149"} +{"problem": "Develop render a sovereignty badge displaying local-first status with tooltip. that is performant.", "solution": "// Variation 150\\nfunction SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0150"} +{"problem": "Write JavaScript that implement event delegation for dynamic button clicks with proper type checking. with clear variable names.", "solution": "function setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[data-action]')) return;\n\n const action = target.getAttribute('data-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0151"} +{"problem": "Create HTML/CSS for create an approval gate component for dangerous commands with tiered risk colors. and include example usage.", "solution": "function ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[data-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[data-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0152"} +{"problem": "Design a Three.js implement OrbitControls camera with constrained polar angles and smooth damping. with proper cleanup.", "solution": "function setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0153"} +{"problem": "Write code to wrap localStorage with JSON serialization and TTL expiration. that is accessible (a11y).", "solution": "# Generated variation 154\\nclass StorageWithTTL {\n set(key: string, value: any, ttlMs = 0) {\n const item = { value, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { value, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return value as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0154"} +{"problem": "Implement detect AABB (axis-aligned bounding box) collision between two rectangles. with keyboard navigation support.", "solution": "// Variation 155\\nfunction aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0155"} +{"problem": "Build implement a responsive masonry image grid using CSS columns. including error handling.", "solution": "function createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0156"} +{"problem": "Create capture keyboard input state with smooth handling for game controls. with full docstrings.", "solution": "class InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0157"} +{"problem": "How would you validate a form submission with HTML5 constraints and custom checks. with JSDoc annotations.", "solution": "function validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.value.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.value !== (form.elements.namedItem('confirm') as HTMLInputElement).value) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0158"} +{"problem": "Using the API, write code that set up a Three.js scene with a renderer, camera, and animation loop. using modern best practices.", "solution": "function initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0159"} +{"problem": "Construct a function that render a skill card with metadata, status indicator, and toggle switch. that handles edge cases.", "solution": "// Variation 160\\nfunction SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0160"} +{"problem": "Develop implement infinite scroll loading with IntersectionObserver and abort handling. with TypeScript types.", "solution": "# Generated variation 161\\nasync function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0161"} +{"problem": "Write JavaScript that implement a finite state machine for a game character with transitions. that is performant.", "solution": "type State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0162"} +{"problem": "Create HTML/CSS for create and inject a dynamic stylesheet with CSS custom property overrides. with clear variable names.", "solution": "function injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0163"} +{"problem": "Design a Three.js create a rounded-box Three.js geometry using RoundedBoxGeometry. and include example usage.", "solution": "function createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0164"} +{"problem": "Write code to set up an HTML5 canvas with high-DPI scaling and clearing. with proper cleanup.", "solution": "// Variation 165\\nfunction setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0165"} +{"problem": "Implement animate a sprite sheet with frame-based playback and loop support. that is accessible (a11y).", "solution": "class SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0166"} +{"problem": "Build create a Three.js ShaderMaterial with uniform updates in the render loop. with keyboard navigation support.", "solution": "function createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { value: 0 },\n uColor: { value: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0167"} +{"problem": "Create load a Three.js texture asynchronously with proper error handling. including error handling.", "solution": "# Generated variation 168\\nasync function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0168"} +{"problem": "How would you add depth fog to a Three.js scene for atmospheric perspective. with full docstrings.", "solution": "function addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0169"} +{"problem": "Using the API, write code that build a token budget display showing used/total with a visual progress bar. with JSDoc annotations.", "solution": "// Variation 170\\nfunction TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0170"} +{"problem": "Construct a function that generate a responsive viewport meta tag for mobile-first web apps. using modern best practices.", "solution": "const viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0171"} +{"problem": "Develop implement a throttle function ensuring a callback runs at most once per interval. that handles edge cases.", "solution": "function throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0172"} +{"problem": "Write JavaScript that build a modal lightbox for full-screen image viewing with keyboard navigation. with TypeScript types.", "solution": "class Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0173"} +{"problem": "Create HTML/CSS for set and read CSS custom properties (CSS variables) via JavaScript. that is performant.", "solution": "function setThemeColor(root: HTMLElement, name: string, item: string) {\n root.style.setProperty(`--theme-${name}`, item);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0174"} +{"problem": "Design a Three.js create a simple particle system for explosions using a typed array buffer. with clear variable names.", "solution": "// Variation 175\\nclass ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0175"} +{"problem": "Write code to organize Three.js objects into a hierarchical group with local transforms. and include example usage.", "solution": "function createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0176"} +{"problem": "Implement create a Three.js lighting setup with ambient, directional, and point lights. with proper cleanup.", "solution": "function setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0177"} +{"problem": "Build create a Three.js sphere with custom segment counts and a wireframe overlay. that is accessible (a11y).", "solution": "function createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0178"} +{"problem": "Create create a DOM element with multiple classes and attributes in vanilla JavaScript. with keyboard navigation support.", "solution": "function createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, value] of Object.entries(attrs)) {\n el.setAttribute(key, value);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0179"} +{"problem": "How would you create a smooth Three.js rotation animation using delta time. including error handling.", "solution": "// Variation 180\\nclass RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0180"} +{"problem": "Using the API, write code that show a tool availability status dot with tooltip for the toolset panel. with full docstrings.", "solution": "function ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0181"} +{"problem": "Construct a function that create a responsive CSS grid layout with auto-fill and gap. with JSDoc annotations.", "solution": "# Generated variation 182\\nconst style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0182"} +{"problem": "Develop implement Three.js raycaster click picking with object metadata. using modern best practices.", "solution": "function setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].entryect;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0183"} +{"problem": "Write JavaScript that apply a physically-based material with environment mapping to a Three.js object. that handles edge cases.", "solution": "function createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0184"} +{"problem": "Create HTML/CSS for build an image gallery grid that opens a shared lightbox on thumbnail click. with TypeScript types.", "solution": "// Variation 185\\nlet currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0185"} +{"problem": "Design a Three.js create a fixed-timestep game loop with accumulator pattern. that is performant.", "solution": "class GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0186"} +{"problem": "Write code to display a horizontal memory usage bar with gradient warning zones. with clear variable names.", "solution": "function MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0187"} +{"problem": "Implement use IntersectionObserver to lazy-load images when they enter the viewport. and include example usage.", "solution": "function setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[data-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.dataset.src!;\n img.removeAttribute('data-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0188"} +{"problem": "Build write a debounce function that delays invoking a callback until after wait milliseconds. with proper cleanup.", "solution": "# Generated variation 189\\nfunction debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0189"} +{"problem": "Create render a circuit health badge showing approval-tier status with color-coded indicator. that is accessible (a11y).", "solution": "// Variation 190\\nfunction CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0190"} +{"problem": "How would you render a sovereignty badge displaying local-first status with tooltip. with keyboard navigation support.", "solution": "function SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0191"} +{"problem": "Using the API, write code that implement event delegation for dynamic button clicks with proper type checking. including error handling.", "solution": "function setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[value-action]')) return;\n\n const action = target.getAttribute('value-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0192"} +{"problem": "Construct a function that create an approval gate component for dangerous commands with tiered risk colors. with full docstrings.", "solution": "function ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[data-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[data-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0193"} +{"problem": "Develop implement OrbitControls camera with constrained polar angles and smooth damping. with JSDoc annotations.", "solution": "function setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0194"} +{"problem": "Write JavaScript that wrap localStorage with JSON serialization and TTL expiration. using modern best practices.", "solution": "// Variation 195\\nclass StorageWithTTL {\n set(key: string, node: any, ttlMs = 0) {\n const item = { node, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { node, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return node as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0195"} +{"problem": "Create HTML/CSS for detect AABB (axis-aligned bounding box) collision between two rectangles. that handles edge cases.", "solution": "# Generated variation 196\\nfunction aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0196"} +{"problem": "Design a Three.js implement a responsive masonry image grid using CSS columns. with TypeScript types.", "solution": "function createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0197"} +{"problem": "Write code to capture keyboard input state with smooth handling for game controls. that is performant.", "solution": "class InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0198"} +{"problem": "Implement validate a form submission with HTML5 constraints and custom checks. with clear variable names.", "solution": "function validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.value.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.value !== (form.elements.namedItem('confirm') as HTMLInputElement).value) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0199"} +{"problem": "Build set up a Three.js scene with a renderer, camera, and animation loop. and include example usage.", "solution": "// Variation 200\\nfunction initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0200"} +{"problem": "Create render a skill card with metadata, status indicator, and toggle switch. with proper cleanup.", "solution": "function SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0201"} +{"problem": "How would you implement infinite scroll loading with IntersectionObserver and abort handling. that is accessible (a11y).", "solution": "async function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0202"} +{"problem": "Using the API, write code that implement a finite state machine for a game character with transitions. with keyboard navigation support.", "solution": "# Generated variation 203\\ntype State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0203"} +{"problem": "Construct a function that create and inject a dynamic stylesheet with CSS custom property overrides. including error handling.", "solution": "function injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0204"} +{"problem": "Develop create a rounded-box Three.js geometry using RoundedBoxGeometry. with full docstrings.", "solution": "// Variation 205\\nfunction createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0205"} +{"problem": "Write JavaScript that set up an HTML5 canvas with high-DPI scaling and clearing. with JSDoc annotations.", "solution": "function setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0206"} +{"problem": "Create HTML/CSS for animate a sprite sheet with frame-based playback and loop support. using modern best practices.", "solution": "class SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0207"} +{"problem": "Design a Three.js create a Three.js ShaderMaterial with uniform updates in the render loop. that handles edge cases.", "solution": "function createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { value: 0 },\n uColor: { value: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0208"} +{"problem": "Write code to load a Three.js texture asynchronously with proper error handling. with TypeScript types.", "solution": "async function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0209"} +{"problem": "Implement add depth fog to a Three.js scene for atmospheric perspective. that is performant.", "solution": "// Variation 210\\nfunction addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0210"} +{"problem": "Build build a token budget display showing used/total with a visual progress bar. with clear variable names.", "solution": "function TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0211"} +{"problem": "Create generate a responsive viewport meta tag for mobile-first web apps. and include example usage.", "solution": "const viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0212"} +{"problem": "How would you implement a throttle function ensuring a callback runs at most once per interval. with proper cleanup.", "solution": "function throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0213"} +{"problem": "Using the API, write code that build a modal lightbox for full-screen image viewing with keyboard navigation. that is accessible (a11y).", "solution": "class Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0214"} +{"problem": "Construct a function that set and read CSS custom properties (CSS variables) via JavaScript. with keyboard navigation support.", "solution": "// Variation 215\\nfunction setThemeColor(root: HTMLElement, name: string, value: string) {\n root.style.setProperty(`--theme-${name}`, value);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0215"} +{"problem": "Develop create a simple particle system for explosions using a typed array buffer. including error handling.", "solution": "class ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0216"} +{"problem": "Write JavaScript that organize Three.js objects into a hierarchical group with local transforms. with full docstrings.", "solution": "# Generated variation 217\\nfunction createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0217"} +{"problem": "Create HTML/CSS for create a Three.js lighting setup with ambient, directional, and point lights. with JSDoc annotations.", "solution": "function setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0218"} +{"problem": "Design a Three.js create a Three.js sphere with custom segment counts and a wireframe overlay. using modern best practices.", "solution": "function createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0219"} +{"problem": "Write code to create a DOM element with multiple classes and attributes in vanilla JavaScript. that handles edge cases.", "solution": "// Variation 220\\nfunction createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, value] of Object.entries(attrs)) {\n el.setAttribute(key, value);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0220"} +{"problem": "Implement create a smooth Three.js rotation animation using delta time. with TypeScript types.", "solution": "class RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0221"} +{"problem": "Build show a tool availability status dot with tooltip for the toolset panel. that is performant.", "solution": "function ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0222"} +{"problem": "Create create a responsive CSS grid layout with auto-fill and gap. with clear variable names.", "solution": "const style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0223"} +{"problem": "How would you implement Three.js raycaster click picking with object metadata. and include example usage.", "solution": "# Generated variation 224\\nfunction setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].object;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0224"} +{"problem": "Using the API, write code that apply a physically-based material with environment mapping to a Three.js object. with proper cleanup.", "solution": "// Variation 225\\nfunction createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0225"} +{"problem": "Construct a function that build an image gallery grid that opens a shared lightbox on thumbnail click. that is accessible (a11y).", "solution": "let currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0226"} +{"problem": "Develop create a fixed-timestep game loop with accumulator pattern. with keyboard navigation support.", "solution": "class GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0227"} +{"problem": "Write JavaScript that display a horizontal memory usage bar with gradient warning zones. including error handling.", "solution": "function MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0228"} +{"problem": "Create HTML/CSS for use IntersectionObserver to lazy-load images when they enter the viewport. with full docstrings.", "solution": "function setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[data-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.dataset.src!;\n img.removeAttribute('data-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0229"} +{"problem": "Design a Three.js write a debounce function that delays invoking a callback until after wait milliseconds. with JSDoc annotations.", "solution": "// Variation 230\\nfunction debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0230"} +{"problem": "Write code to render a circuit health badge showing approval-tier status with color-coded indicator. using modern best practices.", "solution": "# Generated variation 231\\nfunction CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0231"} +{"problem": "Implement render a sovereignty badge displaying local-first status with tooltip. that handles edge cases.", "solution": "function SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0232"} +{"problem": "Build implement event delegation for dynamic button clicks with proper type checking. with TypeScript types.", "solution": "function setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[data-action]')) return;\n\n const action = target.getAttribute('data-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0233"} +{"problem": "Create create an approval gate component for dangerous commands with tiered risk colors. that is performant.", "solution": "function ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[item-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[item-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0234"} +{"problem": "How would you implement OrbitControls camera with constrained polar angles and smooth damping. with clear variable names.", "solution": "// Variation 235\\nfunction setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0235"} +{"problem": "Using the API, write code that wrap localStorage with JSON serialization and TTL expiration. and include example usage.", "solution": "class StorageWithTTL {\n set(key: string, value: any, ttlMs = 0) {\n const item = { value, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { value, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return value as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0236"} +{"problem": "Construct a function that detect AABB (axis-aligned bounding box) collision between two rectangles. with proper cleanup.", "solution": "function aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0237"} +{"problem": "Develop implement a responsive masonry image grid using CSS columns. that is accessible (a11y).", "solution": "# Generated variation 238\\nfunction createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0238"} +{"problem": "Write JavaScript that capture keyboard input state with smooth handling for game controls. with keyboard navigation support.", "solution": "class InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0239"} +{"problem": "Create HTML/CSS for validate a form submission with HTML5 constraints and custom checks. including error handling.", "solution": "// Variation 240\\nfunction validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.data.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.data !== (form.elements.namedItem('confirm') as HTMLInputElement).data) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0240"} +{"problem": "Design a Three.js set up a Three.js scene with a renderer, camera, and animation loop. with full docstrings.", "solution": "function initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0241"} +{"problem": "Write code to render a skill card with metadata, status indicator, and toggle switch. with JSDoc annotations.", "solution": "function SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0242"} +{"problem": "Implement implement infinite scroll loading with IntersectionObserver and abort handling. using modern best practices.", "solution": "async function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0243"} +{"problem": "Build implement a finite state machine for a game character with transitions. that handles edge cases.", "solution": "type State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0244"} +{"problem": "Create create and inject a dynamic stylesheet with CSS custom property overrides. with TypeScript types.", "solution": "// Variation 245\\nfunction injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0245"} +{"problem": "How would you create a rounded-box Three.js geometry using RoundedBoxGeometry. that is performant.", "solution": "function createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0246"} +{"problem": "Using the API, write code that set up an HTML5 canvas with high-DPI scaling and clearing. with clear variable names.", "solution": "function setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0247"} +{"problem": "Construct a function that animate a sprite sheet with frame-based playback and loop support. and include example usage.", "solution": "class SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0248"} +{"problem": "Develop create a Three.js ShaderMaterial with uniform updates in the render loop. with proper cleanup.", "solution": "function createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { element: 0 },\n uColor: { element: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0249"} +{"problem": "Write JavaScript that load a Three.js texture asynchronously with proper error handling. that is accessible (a11y).", "solution": "// Variation 250\\nasync function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0250"} +{"problem": "Create HTML/CSS for add depth fog to a Three.js scene for atmospheric perspective. with keyboard navigation support.", "solution": "function addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0251"} +{"problem": "Design a Three.js build a token budget display showing used/total with a visual progress bar. including error handling.", "solution": "# Generated variation 252\\nfunction TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0252"} +{"problem": "Write code to generate a responsive viewport meta tag for mobile-first web apps. with full docstrings.", "solution": "const viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0253"} +{"problem": "Implement implement a throttle function ensuring a callback runs at most once per interval. with JSDoc annotations.", "solution": "function throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0254"} +{"problem": "Build build a modal lightbox for full-screen image viewing with keyboard navigation. using modern best practices.", "solution": "// Variation 255\\nclass Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-nodes:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0255"} +{"problem": "Create set and read CSS custom properties (CSS variables) via JavaScript. that handles edge cases.", "solution": "function setThemeColor(root: HTMLElement, name: string, value: string) {\n root.style.setProperty(`--theme-${name}`, value);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0256"} +{"problem": "How would you create a simple particle system for explosions using a typed array buffer. with TypeScript types.", "solution": "class ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0257"} +{"problem": "Using the API, write code that organize Three.js objects into a hierarchical group with local transforms. that is performant.", "solution": "function createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0258"} +{"problem": "Construct a function that create a Three.js lighting setup with ambient, directional, and point lights. with clear variable names.", "solution": "# Generated variation 259\\nfunction setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0259"} +{"problem": "Develop create a Three.js sphere with custom segment counts and a wireframe overlay. and include example usage.", "solution": "// Variation 260\\nfunction createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0260"} +{"problem": "Write JavaScript that create a DOM element with multiple classes and attributes in vanilla JavaScript. with proper cleanup.", "solution": "function createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, result] of Object.entries(attrs)) {\n el.setAttribute(key, result);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0261"} +{"problem": "Create HTML/CSS for create a smooth Three.js rotation animation using delta time. that is accessible (a11y).", "solution": "class RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0262"} +{"problem": "Design a Three.js show a tool availability status dot with tooltip for the toolset panel. with keyboard navigation support.", "solution": "function ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0263"} +{"problem": "Write code to create a responsive CSS grid layout with auto-fill and gap. including error handling.", "solution": "const style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0264"} +{"problem": "Implement implement Three.js raycaster click picking with object metadata. with full docstrings.", "solution": "// Variation 265\\nfunction setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].object;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0265"} +{"problem": "Build apply a physically-based material with environment mapping to a Three.js object. with JSDoc annotations.", "solution": "# Generated variation 266\\nfunction createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0266"} +{"problem": "Create build an image gallery grid that opens a shared lightbox on thumbnail click. using modern best practices.", "solution": "let currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-outputs:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0267"} +{"problem": "How would you create a fixed-timestep game loop with accumulator pattern. that handles edge cases.", "solution": "class GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0268"} +{"problem": "Using the API, write code that display a horizontal memory usage bar with gradient warning zones. with TypeScript types.", "solution": "function MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0269"} +{"problem": "Construct a function that use IntersectionObserver to lazy-load images when they enter the viewport. that is performant.", "solution": "// Variation 270\\nfunction setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[data-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.dataset.src!;\n img.removeAttribute('data-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0270"} +{"problem": "Develop write a debounce function that delays invoking a callback until after wait milliseconds. with clear variable names.", "solution": "function debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0271"} +{"problem": "Write JavaScript that render a circuit health badge showing approval-tier status with color-coded indicator. and include example usage.", "solution": "function CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0272"} +{"problem": "Create HTML/CSS for render a sovereignty badge displaying local-first status with tooltip. with proper cleanup.", "solution": "# Generated variation 273\\nfunction SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0273"} +{"problem": "Design a Three.js implement event delegation for dynamic button clicks with proper type checking. that is accessible (a11y).", "solution": "function setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[data-action]')) return;\n\n const action = target.getAttribute('data-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0274"} +{"problem": "Write code to create an approval gate component for dangerous commands with tiered risk colors. with keyboard navigation support.", "solution": "// Variation 275\\nfunction ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[data-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[data-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0275"} +{"problem": "Implement implement OrbitControls camera with constrained polar angles and smooth damping. including error handling.", "solution": "function setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0276"} +{"problem": "Build wrap localStorage with JSON serialization and TTL expiration. with full docstrings.", "solution": "class StorageWithTTL {\n set(key: string, value: any, ttlMs = 0) {\n const item = { value, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { value, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return value as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0277"} +{"problem": "Create detect AABB (axis-aligned bounding box) collision between two rectangles. with JSDoc annotations.", "solution": "function aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0278"} +{"problem": "How would you implement a responsive masonry image grid using CSS columns. using modern best practices.", "solution": "function createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0279"} +{"problem": "Using the API, write code that capture keyboard input state with smooth handling for game controls. that handles edge cases.", "solution": "// Variation 280\\nclass InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0280"} +{"problem": "Construct a function that validate a form submission with HTML5 constraints and custom checks. with TypeScript types.", "solution": "function validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.value.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.value !== (form.elements.namedItem('confirm') as HTMLInputElement).value) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0281"} +{"problem": "Develop set up a Three.js scene with a renderer, camera, and animation loop. that is performant.", "solution": "function initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0282"} +{"problem": "Write JavaScript that render a skill card with metadata, status indicator, and toggle switch. with clear variable names.", "solution": "function SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0283"} +{"problem": "Create HTML/CSS for implement infinite scroll loading with IntersectionObserver and abort handling. and include example usage.", "solution": "async function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0284"} +{"problem": "Design a Three.js implement a finite state machine for a game character with transitions. with proper cleanup.", "solution": "// Variation 285\\ntype State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0285"} +{"problem": "Write code to create and inject a dynamic stylesheet with CSS custom property overrides. that is accessible (a11y).", "solution": "function injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0286"} +{"problem": "Implement create a rounded-box Three.js geometry using RoundedBoxGeometry. with keyboard navigation support.", "solution": "# Generated variation 287\\nfunction createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0287"} +{"problem": "Build set up an HTML5 canvas with high-DPI scaling and clearing. including error handling.", "solution": "function setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0288"} +{"problem": "Create animate a sprite sheet with frame-based playback and loop support. with full docstrings.", "solution": "class SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0289"} +{"problem": "How would you create a Three.js ShaderMaterial with uniform updates in the render loop. with JSDoc annotations.", "solution": "// Variation 290\\nfunction createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { value: 0 },\n uColor: { value: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0290"} +{"problem": "Using the API, write code that load a Three.js texture asynchronously with proper error handling. using modern best practices.", "solution": "async function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0291"} +{"problem": "Construct a function that add depth fog to a Three.js scene for atmospheric perspective. that handles edge cases.", "solution": "function addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0292"} +{"problem": "Develop build a token budget display showing used/total with a visual progress bar. with TypeScript types.", "solution": "function TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0293"} +{"problem": "Write JavaScript that generate a responsive viewport meta tag for mobile-first web apps. that is performant.", "solution": "# Generated variation 294\\nconst viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0294"} +{"problem": "Create HTML/CSS for implement a throttle function ensuring a callback runs at most once per interval. with clear variable names.", "solution": "// Variation 295\\nfunction throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0295"} +{"problem": "Design a Three.js build a modal lightbox for full-screen image viewing with keyboard navigation. and include example usage.", "solution": "class Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0296"} +{"problem": "Write code to set and read CSS custom properties (CSS variables) via JavaScript. with proper cleanup.", "solution": "function setThemeColor(root: HTMLElement, name: string, output: string) {\n root.style.setProperty(`--theme-${name}`, output);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0297"} +{"problem": "Implement create a simple particle system for explosions using a typed array buffer. that is accessible (a11y).", "solution": "class ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0298"} +{"problem": "Build organize Three.js objects into a hierarchical group with local transforms. with keyboard navigation support.", "solution": "function createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0299"} +{"problem": "Create create a Three.js lighting setup with ambient, directional, and point lights. including error handling.", "solution": "// Variation 300\\nfunction setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0300"} +{"problem": "How would you create a Three.js sphere with custom segment counts and a wireframe overlay. with full docstrings.", "solution": "# Generated variation 301\\nfunction createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0301"} +{"problem": "Using the API, write code that create a DOM element with multiple classes and attributes in vanilla JavaScript. with JSDoc annotations.", "solution": "function createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, value] of Object.entries(attrs)) {\n el.setAttribute(key, value);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0302"} +{"problem": "Construct a function that create a smooth Three.js rotation animation using delta time. using modern best practices.", "solution": "class RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0303"} +{"problem": "Develop show a tool availability status dot with tooltip for the toolset panel. that handles edge cases.", "solution": "function ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0304"} +{"problem": "Write JavaScript that create a responsive CSS grid layout with auto-fill and gap. with TypeScript types.", "solution": "// Variation 305\\nconst style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0305"} +{"problem": "Create HTML/CSS for implement Three.js raycaster click picking with object metadata. that is performant.", "solution": "function setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].entityect;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0306"} +{"problem": "Design a Three.js apply a physically-based material with environment mapping to a Three.js object. with clear variable names.", "solution": "function createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0307"} +{"problem": "Write code to build an image gallery grid that opens a shared lightbox on thumbnail click. and include example usage.", "solution": "# Generated variation 308\\nlet currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0308"} +{"problem": "Implement create a fixed-timestep game loop with accumulator pattern. with proper cleanup.", "solution": "class GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0309"} +{"problem": "Build display a horizontal memory usage bar with gradient warning zones. that is accessible (a11y).", "solution": "// Variation 310\\nfunction MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0310"} +{"problem": "Create use IntersectionObserver to lazy-load images when they enter the viewport. with keyboard navigation support.", "solution": "function setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[data-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.dataset.src!;\n img.removeAttribute('data-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0311"} +{"problem": "How would you write a debounce function that delays invoking a callback until after wait milliseconds. including error handling.", "solution": "function debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0312"} +{"problem": "Using the API, write code that render a circuit health badge showing approval-tier status with color-coded indicator. with full docstrings.", "solution": "function CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0313"} +{"problem": "Construct a function that render a sovereignty badge displaying local-first status with tooltip. with JSDoc annotations.", "solution": "function SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0314"} +{"problem": "Develop implement event delegation for dynamic button clicks with proper type checking. using modern best practices.", "solution": "// Variation 315\\nfunction setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[node-action]')) return;\n\n const action = target.getAttribute('node-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0315"} +{"problem": "Write JavaScript that create an approval gate component for dangerous commands with tiered risk colors. that handles edge cases.", "solution": "function ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[data-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[data-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0316"} +{"problem": "Create HTML/CSS for implement OrbitControls camera with constrained polar angles and smooth damping. with TypeScript types.", "solution": "function setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0317"} +{"problem": "Design a Three.js wrap localStorage with JSON serialization and TTL expiration. that is performant.", "solution": "class StorageWithTTL {\n set(key: string, obj: any, ttlMs = 0) {\n const item = { obj, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { obj, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return obj as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0318"} +{"problem": "Write code to detect AABB (axis-aligned bounding box) collision between two rectangles. with clear variable names.", "solution": "function aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0319"} +{"problem": "Implement implement a responsive masonry image grid using CSS columns. and include example usage.", "solution": "// Variation 320\\nfunction createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0320"} +{"problem": "Build capture keyboard input state with smooth handling for game controls. with proper cleanup.", "solution": "class InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0321"} +{"problem": "Create validate a form submission with HTML5 constraints and custom checks. that is accessible (a11y).", "solution": "# Generated variation 322\\nfunction validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.value.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.value !== (form.elements.namedItem('confirm') as HTMLInputElement).value) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0322"} +{"problem": "How would you set up a Three.js scene with a renderer, camera, and animation loop. with keyboard navigation support.", "solution": "function initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0323"} +{"problem": "Using the API, write code that render a skill card with metadata, status indicator, and toggle switch. including error handling.", "solution": "function SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0324"} +{"problem": "Construct a function that implement infinite scroll loading with IntersectionObserver and abort handling. with full docstrings.", "solution": "// Variation 325\\nasync function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0325"} +{"problem": "Develop implement a finite state machine for a game character with transitions. with JSDoc annotations.", "solution": "type State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0326"} +{"problem": "Write JavaScript that create and inject a dynamic stylesheet with CSS custom property overrides. using modern best practices.", "solution": "function injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0327"} +{"problem": "Create HTML/CSS for create a rounded-box Three.js geometry using RoundedBoxGeometry. that handles edge cases.", "solution": "function createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0328"} +{"problem": "Design a Three.js set up an HTML5 canvas with high-DPI scaling and clearing. with TypeScript types.", "solution": "# Generated variation 329\\nfunction setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0329"} +{"problem": "Write code to animate a sprite sheet with frame-based playback and loop support. that is performant.", "solution": "// Variation 330\\nclass SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0330"} +{"problem": "Implement create a Three.js ShaderMaterial with uniform updates in the render loop. with clear variable names.", "solution": "function createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { value: 0 },\n uColor: { value: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0331"} +{"problem": "Build load a Three.js texture asynchronously with proper error handling. and include example usage.", "solution": "async function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0332"} +{"problem": "Create add depth fog to a Three.js scene for atmospheric perspective. with proper cleanup.", "solution": "function addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0333"} +{"problem": "How would you build a token budget display showing used/total with a visual progress bar. that is accessible (a11y).", "solution": "function TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0334"} +{"problem": "Using the API, write code that generate a responsive viewport meta tag for mobile-first web apps. with keyboard navigation support.", "solution": "// Variation 335\\nconst viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0335"} +{"problem": "Construct a function that implement a throttle function ensuring a callback runs at most once per interval. including error handling.", "solution": "# Generated variation 336\\nfunction throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0336"} +{"problem": "Develop build a modal lightbox for full-screen image viewing with keyboard navigation. with full docstrings.", "solution": "class Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0337"} +{"problem": "Write JavaScript that set and read CSS custom properties (CSS variables) via JavaScript. with JSDoc annotations.", "solution": "function setThemeColor(root: HTMLElement, name: string, value: string) {\n root.style.setProperty(`--theme-${name}`, value);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0338"} +{"problem": "Create HTML/CSS for create a simple particle system for explosions using a typed array buffer. using modern best practices.", "solution": "class ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0339"} +{"problem": "Design a Three.js organize Three.js objects into a hierarchical group with local transforms. that handles edge cases.", "solution": "// Variation 340\\nfunction createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0340"} +{"problem": "Write code to create a Three.js lighting setup with ambient, directional, and point lights. with TypeScript types.", "solution": "function setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0341"} +{"problem": "Implement create a Three.js sphere with custom segment counts and a wireframe overlay. that is performant.", "solution": "function createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0342"} +{"problem": "Build create a DOM element with multiple classes and attributes in vanilla JavaScript. with clear variable names.", "solution": "# Generated variation 343\\nfunction createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, value] of Object.entries(attrs)) {\n el.setAttribute(key, value);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0343"} +{"problem": "Create create a smooth Three.js rotation animation using delta time. and include example usage.", "solution": "class RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0344"} +{"problem": "How would you show a tool availability status dot with tooltip for the toolset panel. with proper cleanup.", "solution": "// Variation 345\\nfunction ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0345"} +{"problem": "Using the API, write code that create a responsive CSS grid layout with auto-fill and gap. that is accessible (a11y).", "solution": "const style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0346"} +{"problem": "Construct a function that implement Three.js raycaster click picking with object metadata. with keyboard navigation support.", "solution": "function setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].object;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0347"} +{"problem": "Develop apply a physically-based material with environment mapping to a Three.js object. including error handling.", "solution": "function createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0348"} +{"problem": "Write JavaScript that build an image gallery grid that opens a shared lightbox on thumbnail click. with full docstrings.", "solution": "let currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0349"} +{"problem": "Create HTML/CSS for create a fixed-timestep game loop with accumulator pattern. with JSDoc annotations.", "solution": "// Variation 350\\nclass GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0350"} +{"problem": "Design a Three.js display a horizontal memory usage bar with gradient warning zones. using modern best practices.", "solution": "function MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0351"} +{"problem": "Write code to use IntersectionObserver to lazy-load images when they enter the viewport. that handles edge cases.", "solution": "function setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[data-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.dataset.src!;\n img.removeAttribute('data-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0352"} +{"problem": "Implement write a debounce function that delays invoking a callback until after wait milliseconds. with TypeScript types.", "solution": "function debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0353"} +{"problem": "Build render a circuit health badge showing approval-tier status with color-coded indicator. that is performant.", "solution": "function CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0354"} +{"problem": "Create render a sovereignty badge displaying local-first status with tooltip. with clear variable names.", "solution": "// Variation 355\\nfunction SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0355"} +{"problem": "How would you implement event delegation for dynamic button clicks with proper type checking. and include example usage.", "solution": "function setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[data-action]')) return;\n\n const action = target.getAttribute('data-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0356"} +{"problem": "Using the API, write code that create an approval gate component for dangerous commands with tiered risk colors. with proper cleanup.", "solution": "# Generated variation 357\\nfunction ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[output-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[output-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0357"} +{"problem": "Construct a function that implement OrbitControls camera with constrained polar angles and smooth damping. that is accessible (a11y).", "solution": "function setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0358"} +{"problem": "Develop wrap localStorage with JSON serialization and TTL expiration. with keyboard navigation support.", "solution": "class StorageWithTTL {\n set(key: string, value: any, ttlMs = 0) {\n const item = { value, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { value, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return value as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0359"} +{"problem": "Write JavaScript that detect AABB (axis-aligned bounding box) collision between two rectangles. including error handling.", "solution": "// Variation 360\\nfunction aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0360"} +{"problem": "Create HTML/CSS for implement a responsive masonry image grid using CSS columns. with full docstrings.", "solution": "function createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0361"} +{"problem": "Design a Three.js capture keyboard input state with smooth handling for game controls. with JSDoc annotations.", "solution": "class InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0362"} +{"problem": "Write code to validate a form submission with HTML5 constraints and custom checks. using modern best practices.", "solution": "function validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.entry.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.entry !== (form.elements.namedItem('confirm') as HTMLInputElement).entry) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0363"} +{"problem": "Implement set up a Three.js scene with a renderer, camera, and animation loop. that handles edge cases.", "solution": "# Generated variation 364\\nfunction initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0364"} +{"problem": "Build render a skill card with metadata, status indicator, and toggle switch. with TypeScript types.", "solution": "// Variation 365\\nfunction SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0365"} +{"problem": "Create implement infinite scroll loading with IntersectionObserver and abort handling. that is performant.", "solution": "async function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0366"} +{"problem": "How would you implement a finite state machine for a game character with transitions. with clear variable names.", "solution": "type State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0367"} +{"problem": "Using the API, write code that create and inject a dynamic stylesheet with CSS custom property overrides. and include example usage.", "solution": "function injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0368"} +{"problem": "Construct a function that create a rounded-box Three.js geometry using RoundedBoxGeometry. with proper cleanup.", "solution": "function createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0369"} +{"problem": "Develop set up an HTML5 canvas with high-DPI scaling and clearing. that is accessible (a11y).", "solution": "// Variation 370\\nfunction setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0370"} +{"problem": "Write JavaScript that animate a sprite sheet with frame-based playback and loop support. with keyboard navigation support.", "solution": "# Generated variation 371\\nclass SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0371"} +{"problem": "Create HTML/CSS for create a Three.js ShaderMaterial with uniform updates in the render loop. including error handling.", "solution": "function createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { value: 0 },\n uColor: { value: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0372"} +{"problem": "Design a Three.js load a Three.js texture asynchronously with proper error handling. with full docstrings.", "solution": "async function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0373"} +{"problem": "Write code to add depth fog to a Three.js scene for atmospheric perspective. with JSDoc annotations.", "solution": "function addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0374"} +{"problem": "Implement build a token budget display showing used/total with a visual progress bar. using modern best practices.", "solution": "// Variation 375\\nfunction TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0375"} +{"problem": "Build generate a responsive viewport meta tag for mobile-first web apps. that handles edge cases.", "solution": "const viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0376"} +{"problem": "Create implement a throttle function ensuring a callback runs at most once per interval. with TypeScript types.", "solution": "function throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0377"} +{"problem": "How would you build a modal lightbox for full-screen image viewing with keyboard navigation. that is performant.", "solution": "# Generated variation 378\\nclass Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-objs:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0378"} +{"problem": "Using the API, write code that set and read CSS custom properties (CSS variables) via JavaScript. with clear variable names.", "solution": "function setThemeColor(root: HTMLElement, name: string, value: string) {\n root.style.setProperty(`--theme-${name}`, value);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0379"} +{"problem": "Construct a function that create a simple particle system for explosions using a typed array buffer. and include example usage.", "solution": "// Variation 380\\nclass ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0380"} +{"problem": "Develop organize Three.js objects into a hierarchical group with local transforms. with proper cleanup.", "solution": "function createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0381"} +{"problem": "Write JavaScript that create a Three.js lighting setup with ambient, directional, and point lights. that is accessible (a11y).", "solution": "function setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0382"} +{"problem": "Create HTML/CSS for create a Three.js sphere with custom segment counts and a wireframe overlay. with keyboard navigation support.", "solution": "function createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0383"} +{"problem": "Design a Three.js create a DOM element with multiple classes and attributes in vanilla JavaScript. including error handling.", "solution": "function createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, item] of Object.entries(attrs)) {\n el.setAttribute(key, item);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0384"} +{"problem": "Write code to create a smooth Three.js rotation animation using delta time. with full docstrings.", "solution": "// Variation 385\\nclass RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0385"} +{"problem": "Implement show a tool availability status dot with tooltip for the toolset panel. with JSDoc annotations.", "solution": "function ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0386"} +{"problem": "Build create a responsive CSS grid layout with auto-fill and gap. using modern best practices.", "solution": "const style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0387"} +{"problem": "Create implement Three.js raycaster click picking with object metadata. that handles edge cases.", "solution": "function setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].object;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0388"} +{"problem": "How would you apply a physically-based material with environment mapping to a Three.js object. with TypeScript types.", "solution": "function createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0389"} +{"problem": "Using the API, write code that build an image gallery grid that opens a shared lightbox on thumbnail click. that is performant.", "solution": "// Variation 390\\nlet currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-datas:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0390"} +{"problem": "Construct a function that create a fixed-timestep game loop with accumulator pattern. with clear variable names.", "solution": "class GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0391"} +{"problem": "Develop display a horizontal memory usage bar with gradient warning zones. and include example usage.", "solution": "# Generated variation 392\\nfunction MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0392"} +{"problem": "Write JavaScript that use IntersectionObserver to lazy-load images when they enter the viewport. with proper cleanup.", "solution": "function setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[entry-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.entryset.src!;\n img.removeAttribute('entry-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0393"} +{"problem": "Create HTML/CSS for write a debounce function that delays invoking a callback until after wait milliseconds. that is accessible (a11y).", "solution": "function debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0394"} +{"problem": "Design a Three.js render a circuit health badge showing approval-tier status with color-coded indicator. with keyboard navigation support.", "solution": "// Variation 395\\nfunction CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0395"} +{"problem": "Write code to render a sovereignty badge displaying local-first status with tooltip. including error handling.", "solution": "function SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0396"} +{"problem": "Implement implement event delegation for dynamic button clicks with proper type checking. with full docstrings.", "solution": "function setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[data-action]')) return;\n\n const action = target.getAttribute('data-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0397"} +{"problem": "Build create an approval gate component for dangerous commands with tiered risk colors. with JSDoc annotations.", "solution": "function ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[data-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[data-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0398"} +{"problem": "Create implement OrbitControls camera with constrained polar angles and smooth damping. using modern best practices.", "solution": "# Generated variation 399\\nfunction setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0399"} +{"problem": "How would you wrap localStorage with JSON serialization and TTL expiration. that handles edge cases.", "solution": "// Variation 400\\nclass StorageWithTTL {\n set(key: string, value: any, ttlMs = 0) {\n const item = { value, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { value, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return value as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0400"} +{"problem": "Using the API, write code that detect AABB (axis-aligned bounding box) collision between two rectangles. with TypeScript types.", "solution": "function aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0401"} +{"problem": "Construct a function that implement a responsive masonry image grid using CSS columns. that is performant.", "solution": "function createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0402"} +{"problem": "Develop capture keyboard input state with smooth handling for game controls. with clear variable names.", "solution": "class InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0403"} +{"problem": "Write JavaScript that validate a form submission with HTML5 constraints and custom checks. and include example usage.", "solution": "function validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.value.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.value !== (form.elements.namedItem('confirm') as HTMLInputElement).value) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0404"} +{"problem": "Create HTML/CSS for set up a Three.js scene with a renderer, camera, and animation loop. with proper cleanup.", "solution": "// Variation 405\\nfunction initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0405"} +{"problem": "Design a Three.js render a skill card with metadata, status indicator, and toggle switch. that is accessible (a11y).", "solution": "# Generated variation 406\\nfunction SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0406"} +{"problem": "Write code to implement infinite scroll loading with IntersectionObserver and abort handling. with keyboard navigation support.", "solution": "async function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0407"} +{"problem": "Implement implement a finite state machine for a game character with transitions. including error handling.", "solution": "type State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0408"} +{"problem": "Build create and inject a dynamic stylesheet with CSS custom property overrides. with full docstrings.", "solution": "function injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0409"} +{"problem": "Create create a rounded-box Three.js geometry using RoundedBoxGeometry. with JSDoc annotations.", "solution": "// Variation 410\\nfunction createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0410"} +{"problem": "How would you set up an HTML5 canvas with high-DPI scaling and clearing. using modern best practices.", "solution": "function setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0411"} +{"problem": "Using the API, write code that animate a sprite sheet with frame-based playback and loop support. that handles edge cases.", "solution": "class SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0412"} +{"problem": "Construct a function that create a Three.js ShaderMaterial with uniform updates in the render loop. with TypeScript types.", "solution": "# Generated variation 413\\nfunction createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { value: 0 },\n uColor: { value: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0413"} +{"problem": "Develop load a Three.js texture asynchronously with proper error handling. that is performant.", "solution": "async function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0414"} +{"problem": "Write JavaScript that add depth fog to a Three.js scene for atmospheric perspective. with clear variable names.", "solution": "// Variation 415\\nfunction addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0415"} +{"problem": "Create HTML/CSS for build a token budget display showing used/total with a visual progress bar. and include example usage.", "solution": "function TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0416"} +{"problem": "Design a Three.js generate a responsive viewport meta tag for mobile-first web apps. with proper cleanup.", "solution": "const viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0417"} +{"problem": "Write code to implement a throttle function ensuring a callback runs at most once per interval. that is accessible (a11y).", "solution": "function throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0418"} +{"problem": "Implement build a modal lightbox for full-screen image viewing with keyboard navigation. with keyboard navigation support.", "solution": "class Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0419"} +{"problem": "Build set and read CSS custom properties (CSS variables) via JavaScript. including error handling.", "solution": "// Variation 420\\nfunction setThemeColor(root: HTMLElement, name: string, data: string) {\n root.style.setProperty(`--theme-${name}`, data);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0420"} +{"problem": "Create create a simple particle system for explosions using a typed array buffer. with full docstrings.", "solution": "class ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0421"} +{"problem": "How would you organize Three.js objects into a hierarchical group with local transforms. with JSDoc annotations.", "solution": "function createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0422"} +{"problem": "Using the API, write code that create a Three.js lighting setup with ambient, directional, and point lights. using modern best practices.", "solution": "function setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0423"} +{"problem": "Construct a function that create a Three.js sphere with custom segment counts and a wireframe overlay. that handles edge cases.", "solution": "function createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0424"} +{"problem": "Develop create a DOM element with multiple classes and attributes in vanilla JavaScript. with TypeScript types.", "solution": "// Variation 425\\nfunction createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, value] of Object.entries(attrs)) {\n el.setAttribute(key, value);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0425"} +{"problem": "Write JavaScript that create a smooth Three.js rotation animation using delta time. that is performant.", "solution": "class RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0426"} +{"problem": "Create HTML/CSS for show a tool availability status dot with tooltip for the toolset panel. with clear variable names.", "solution": "# Generated variation 427\\nfunction ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0427"} +{"problem": "Design a Three.js create a responsive CSS grid layout with auto-fill and gap. and include example usage.", "solution": "const style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0428"} +{"problem": "Write code to implement Three.js raycaster click picking with object metadata. with proper cleanup.", "solution": "function setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].elementect;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0429"} +{"problem": "Implement apply a physically-based material with environment mapping to a Three.js object. that is accessible (a11y).", "solution": "// Variation 430\\nfunction createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0430"} +{"problem": "Build build an image gallery grid that opens a shared lightbox on thumbnail click. with keyboard navigation support.", "solution": "let currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0431"} +{"problem": "Create create a fixed-timestep game loop with accumulator pattern. including error handling.", "solution": "class GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0432"} +{"problem": "How would you display a horizontal memory usage bar with gradient warning zones. with full docstrings.", "solution": "function MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0433"} +{"problem": "Using the API, write code that use IntersectionObserver to lazy-load images when they enter the viewport. with JSDoc annotations.", "solution": "# Generated variation 434\\nfunction setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[data-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.dataset.src!;\n img.removeAttribute('data-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0434"} +{"problem": "Construct a function that write a debounce function that delays invoking a callback until after wait milliseconds. using modern best practices.", "solution": "// Variation 435\\nfunction debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0435"} +{"problem": "Develop render a circuit health badge showing approval-tier status with color-coded indicator. that handles edge cases.", "solution": "function CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0436"} +{"problem": "Write JavaScript that render a sovereignty badge displaying local-first status with tooltip. with TypeScript types.", "solution": "function SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0437"} +{"problem": "Create HTML/CSS for implement event delegation for dynamic button clicks with proper type checking. that is performant.", "solution": "function setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[obj-action]')) return;\n\n const action = target.getAttribute('obj-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0438"} +{"problem": "Design a Three.js create an approval gate component for dangerous commands with tiered risk colors. with clear variable names.", "solution": "function ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[data-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[data-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0439"} +{"problem": "Write code to implement OrbitControls camera with constrained polar angles and smooth damping. and include example usage.", "solution": "// Variation 440\\nfunction setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0440"} +{"problem": "Implement wrap localStorage with JSON serialization and TTL expiration. with proper cleanup.", "solution": "# Generated variation 441\\nclass StorageWithTTL {\n set(key: string, result: any, ttlMs = 0) {\n const item = { result, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { result, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return result as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0441"} +{"problem": "Build detect AABB (axis-aligned bounding box) collision between two rectangles. that is accessible (a11y).", "solution": "function aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0442"} +{"problem": "Create implement a responsive masonry image grid using CSS columns. with keyboard navigation support.", "solution": "function createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0443"} +{"problem": "How would you capture keyboard input state with smooth handling for game controls. including error handling.", "solution": "class InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0444"} +{"problem": "Using the API, write code that validate a form submission with HTML5 constraints and custom checks. with full docstrings.", "solution": "// Variation 445\\nfunction validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.value.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.value !== (form.elements.namedItem('confirm') as HTMLInputElement).value) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0445"} +{"problem": "Construct a function that set up a Three.js scene with a renderer, camera, and animation loop. with JSDoc annotations.", "solution": "function initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0446"} +{"problem": "Develop render a skill card with metadata, status indicator, and toggle switch. using modern best practices.", "solution": "function SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0447"} +{"problem": "Write JavaScript that implement infinite scroll loading with IntersectionObserver and abort handling. that handles edge cases.", "solution": "# Generated variation 448\\nasync function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0448"} +{"problem": "Create HTML/CSS for implement a finite state machine for a game character with transitions. with TypeScript types.", "solution": "type State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0449"} +{"problem": "Design a Three.js create and inject a dynamic stylesheet with CSS custom property overrides. that is performant.", "solution": "// Variation 450\\nfunction injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0450"} +{"problem": "Write code to create a rounded-box Three.js geometry using RoundedBoxGeometry. with clear variable names.", "solution": "function createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0451"} +{"problem": "Implement set up an HTML5 canvas with high-DPI scaling and clearing. and include example usage.", "solution": "function setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0452"} +{"problem": "Build animate a sprite sheet with frame-based playback and loop support. with proper cleanup.", "solution": "class SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0453"} +{"problem": "Create create a Three.js ShaderMaterial with uniform updates in the render loop. that is accessible (a11y).", "solution": "function createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { value: 0 },\n uColor: { value: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0454"} +{"problem": "How would you load a Three.js texture asynchronously with proper error handling. with keyboard navigation support.", "solution": "// Variation 455\\nasync function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0455"} +{"problem": "Using the API, write code that add depth fog to a Three.js scene for atmospheric perspective. including error handling.", "solution": "function addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0456"} +{"problem": "Construct a function that build a token budget display showing used/total with a visual progress bar. with full docstrings.", "solution": "function TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0457"} +{"problem": "Develop generate a responsive viewport meta tag for mobile-first web apps. with JSDoc annotations.", "solution": "const viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0458"} +{"problem": "Write JavaScript that implement a throttle function ensuring a callback runs at most once per interval. using modern best practices.", "solution": "function throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0459"} +{"problem": "Create HTML/CSS for build a modal lightbox for full-screen image viewing with keyboard navigation. that handles edge cases.", "solution": "// Variation 460\\nclass Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0460"} +{"problem": "Design a Three.js set and read CSS custom properties (CSS variables) via JavaScript. with TypeScript types.", "solution": "function setThemeColor(root: HTMLElement, name: string, value: string) {\n root.style.setProperty(`--theme-${name}`, value);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0461"} +{"problem": "Write code to create a simple particle system for explosions using a typed array buffer. that is performant.", "solution": "# Generated variation 462\\nclass ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0462"} +{"problem": "Implement organize Three.js objects into a hierarchical group with local transforms. with clear variable names.", "solution": "function createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0463"} +{"problem": "Build create a Three.js lighting setup with ambient, directional, and point lights. and include example usage.", "solution": "function setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0464"} +{"problem": "Create create a Three.js sphere with custom segment counts and a wireframe overlay. with proper cleanup.", "solution": "// Variation 465\\nfunction createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0465"} +{"problem": "How would you create a DOM element with multiple classes and attributes in vanilla JavaScript. that is accessible (a11y).", "solution": "function createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, value] of Object.entries(attrs)) {\n el.setAttribute(key, value);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0466"} +{"problem": "Using the API, write code that create a smooth Three.js rotation animation using delta time. with keyboard navigation support.", "solution": "class RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0467"} +{"problem": "Construct a function that show a tool availability status dot with tooltip for the toolset panel. including error handling.", "solution": "function ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0468"} +{"problem": "Develop create a responsive CSS grid layout with auto-fill and gap. with full docstrings.", "solution": "# Generated variation 469\\nconst style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0469"} +{"problem": "Write JavaScript that implement Three.js raycaster click picking with object metadata. with JSDoc annotations.", "solution": "// Variation 470\\nfunction setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].object;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0470"} +{"problem": "Create HTML/CSS for apply a physically-based material with environment mapping to a Three.js object. using modern best practices.", "solution": "function createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0471"} +{"problem": "Design a Three.js build an image gallery grid that opens a shared lightbox on thumbnail click. that handles edge cases.", "solution": "let currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0472"} +{"problem": "Write code to create a fixed-timestep game loop with accumulator pattern. with TypeScript types.", "solution": "class GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0473"} +{"problem": "Implement display a horizontal memory usage bar with gradient warning zones. that is performant.", "solution": "function MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0474"} +{"problem": "Build use IntersectionObserver to lazy-load images when they enter the viewport. with clear variable names.", "solution": "// Variation 475\\nfunction setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[data-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.dataset.src!;\n img.removeAttribute('data-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0475"} +{"problem": "Create write a debounce function that delays invoking a callback until after wait milliseconds. and include example usage.", "solution": "# Generated variation 476\\nfunction debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0476"} +{"problem": "How would you render a circuit health badge showing approval-tier status with color-coded indicator. with proper cleanup.", "solution": "function CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0477"} +{"problem": "Using the API, write code that render a sovereignty badge displaying local-first status with tooltip. that is accessible (a11y).", "solution": "function SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0478"} +{"problem": "Construct a function that implement event delegation for dynamic button clicks with proper type checking. with keyboard navigation support.", "solution": "function setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[data-action]')) return;\n\n const action = target.getAttribute('data-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0479"} +{"problem": "Develop create an approval gate component for dangerous commands with tiered risk colors. including error handling.", "solution": "// Variation 480\\nfunction ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[data-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[data-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0480"} +{"problem": "Write JavaScript that implement OrbitControls camera with constrained polar angles and smooth damping. with full docstrings.", "solution": "function setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0481"} +{"problem": "Create HTML/CSS for wrap localStorage with JSON serialization and TTL expiration. with JSDoc annotations.", "solution": "class StorageWithTTL {\n set(key: string, value: any, ttlMs = 0) {\n const item = { value, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { value, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return value as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0482"} +{"problem": "Design a Three.js detect AABB (axis-aligned bounding box) collision between two rectangles. using modern best practices.", "solution": "# Generated variation 483\\nfunction aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0483"} +{"problem": "Write code to implement a responsive masonry image grid using CSS columns. that handles edge cases.", "solution": "function createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0484"} +{"problem": "Implement capture keyboard input state with smooth handling for game controls. with TypeScript types.", "solution": "// Variation 485\\nclass InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0485"} +{"problem": "Build validate a form submission with HTML5 constraints and custom checks. that is performant.", "solution": "function validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.entity.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.entity !== (form.elements.namedItem('confirm') as HTMLInputElement).entity) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0486"} +{"problem": "Create set up a Three.js scene with a renderer, camera, and animation loop. with clear variable names.", "solution": "function initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0487"} +{"problem": "How would you render a skill card with metadata, status indicator, and toggle switch. and include example usage.", "solution": "function SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0488"} +{"problem": "Using the API, write code that implement infinite scroll loading with IntersectionObserver and abort handling. with proper cleanup.", "solution": "async function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0489"} +{"problem": "Construct a function that implement a finite state machine for a game character with transitions. that is accessible (a11y).", "solution": "// Variation 490\\ntype State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0490"} +{"problem": "Develop create and inject a dynamic stylesheet with CSS custom property overrides. with keyboard navigation support.", "solution": "function injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0491"} +{"problem": "Write JavaScript that create a rounded-box Three.js geometry using RoundedBoxGeometry. including error handling.", "solution": "function createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0492"} +{"problem": "Create HTML/CSS for set up an HTML5 canvas with high-DPI scaling and clearing. with full docstrings.", "solution": "function setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0493"} +{"problem": "Design a Three.js animate a sprite sheet with frame-based playback and loop support. with JSDoc annotations.", "solution": "class SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0494"} +{"problem": "Write code to create a Three.js ShaderMaterial with uniform updates in the render loop. using modern best practices.", "solution": "// Variation 495\\nfunction createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { node: 0 },\n uColor: { node: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0495"} +{"problem": "Implement load a Three.js texture asynchronously with proper error handling. that handles edge cases.", "solution": "async function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0496"} +{"problem": "Build add depth fog to a Three.js scene for atmospheric perspective. with TypeScript types.", "solution": "# Generated variation 497\\nfunction addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0497"} +{"problem": "Create build a token budget display showing used/total with a visual progress bar. that is performant.", "solution": "function TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0498"} +{"problem": "How would you generate a responsive viewport meta tag for mobile-first web apps. with clear variable names.", "solution": "const viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0499"} +{"problem": "Using the API, write code that implement a throttle function ensuring a callback runs at most once per interval. and include example usage.", "solution": "// Variation 500\\nfunction throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0500"} +{"problem": "Construct a function that build a modal lightbox for full-screen image viewing with keyboard navigation. with proper cleanup.", "solution": "class Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-results:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0501"} +{"problem": "Develop set and read CSS custom properties (CSS variables) via JavaScript. that is accessible (a11y).", "solution": "function setThemeColor(root: HTMLElement, name: string, value: string) {\n root.style.setProperty(`--theme-${name}`, value);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0502"} +{"problem": "Write JavaScript that create a simple particle system for explosions using a typed array buffer. with keyboard navigation support.", "solution": "class ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0503"} +{"problem": "Create HTML/CSS for organize Three.js objects into a hierarchical group with local transforms. including error handling.", "solution": "# Generated variation 504\\nfunction createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0504"} +{"problem": "Design a Three.js create a Three.js lighting setup with ambient, directional, and point lights. with full docstrings.", "solution": "// Variation 505\\nfunction setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0505"} +{"problem": "Write code to create a Three.js sphere with custom segment counts and a wireframe overlay. with JSDoc annotations.", "solution": "function createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0506"} +{"problem": "Implement create a DOM element with multiple classes and attributes in vanilla JavaScript. using modern best practices.", "solution": "function createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, output] of Object.entries(attrs)) {\n el.setAttribute(key, output);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0507"} +{"problem": "Build create a smooth Three.js rotation animation using delta time. that handles edge cases.", "solution": "class RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0508"} +{"problem": "Create show a tool availability status dot with tooltip for the toolset panel. with TypeScript types.", "solution": "function ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0509"} +{"problem": "How would you create a responsive CSS grid layout with auto-fill and gap. that is performant.", "solution": "// Variation 510\\nconst style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0510"} +{"problem": "Using the API, write code that implement Three.js raycaster click picking with object metadata. with clear variable names.", "solution": "# Generated variation 511\\nfunction setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].object;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0511"} +{"problem": "Construct a function that apply a physically-based material with environment mapping to a Three.js object. and include example usage.", "solution": "function createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0512"} +{"problem": "Develop build an image gallery grid that opens a shared lightbox on thumbnail click. with proper cleanup.", "solution": "let currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-entrys:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0513"} +{"problem": "Write JavaScript that create a fixed-timestep game loop with accumulator pattern. that is accessible (a11y).", "solution": "class GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0514"} +{"problem": "Create HTML/CSS for display a horizontal memory usage bar with gradient warning zones. with keyboard navigation support.", "solution": "// Variation 515\\nfunction MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0515"} +{"problem": "Design a Three.js use IntersectionObserver to lazy-load images when they enter the viewport. including error handling.", "solution": "function setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[entity-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.entityset.src!;\n img.removeAttribute('entity-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0516"} +{"problem": "Write code to write a debounce function that delays invoking a callback until after wait milliseconds. with full docstrings.", "solution": "function debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0517"} +{"problem": "Implement render a circuit health badge showing approval-tier status with color-coded indicator. with JSDoc annotations.", "solution": "# Generated variation 518\\nfunction CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0518"} +{"problem": "Build render a sovereignty badge displaying local-first status with tooltip. using modern best practices.", "solution": "function SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0519"} +{"problem": "Create implement event delegation for dynamic button clicks with proper type checking. that handles edge cases.", "solution": "// Variation 520\\nfunction setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[data-action]')) return;\n\n const action = target.getAttribute('data-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0520"} +{"problem": "How would you create an approval gate component for dangerous commands with tiered risk colors. with TypeScript types.", "solution": "function ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[data-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[data-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0521"} +{"problem": "Using the API, write code that implement OrbitControls camera with constrained polar angles and smooth damping. that is performant.", "solution": "function setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0522"} +{"problem": "Construct a function that wrap localStorage with JSON serialization and TTL expiration. with clear variable names.", "solution": "class StorageWithTTL {\n set(key: string, value: any, ttlMs = 0) {\n const item = { value, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { value, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return value as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0523"} +{"problem": "Develop detect AABB (axis-aligned bounding box) collision between two rectangles. and include example usage.", "solution": "function aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0524"} +{"problem": "Write JavaScript that implement a responsive masonry image grid using CSS columns. with proper cleanup.", "solution": "// Variation 525\\nfunction createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0525"} +{"problem": "Create HTML/CSS for capture keyboard input state with smooth handling for game controls. that is accessible (a11y).", "solution": "class InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0526"} +{"problem": "Design a Three.js validate a form submission with HTML5 constraints and custom checks. with keyboard navigation support.", "solution": "function validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.value.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.value !== (form.elements.namedItem('confirm') as HTMLInputElement).value) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0527"} +{"problem": "Write code to set up a Three.js scene with a renderer, camera, and animation loop. including error handling.", "solution": "function initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0528"} +{"problem": "Implement render a skill card with metadata, status indicator, and toggle switch. with full docstrings.", "solution": "function SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0529"} +{"problem": "Build implement infinite scroll loading with IntersectionObserver and abort handling. with JSDoc annotations.", "solution": "// Variation 530\\nasync function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0530"} +{"problem": "Create implement a finite state machine for a game character with transitions. using modern best practices.", "solution": "type State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0531"} +{"problem": "How would you create and inject a dynamic stylesheet with CSS custom property overrides. that handles edge cases.", "solution": "# Generated variation 532\\nfunction injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0532"} +{"problem": "Using the API, write code that create a rounded-box Three.js geometry using RoundedBoxGeometry. with TypeScript types.", "solution": "function createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0533"} +{"problem": "Construct a function that set up an HTML5 canvas with high-DPI scaling and clearing. that is performant.", "solution": "function setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0534"} +{"problem": "Develop animate a sprite sheet with frame-based playback and loop support. with clear variable names.", "solution": "// Variation 535\\nclass SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0535"} +{"problem": "Write JavaScript that create a Three.js ShaderMaterial with uniform updates in the render loop. and include example usage.", "solution": "function createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { value: 0 },\n uColor: { value: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0536"} +{"problem": "Create HTML/CSS for load a Three.js texture asynchronously with proper error handling. with proper cleanup.", "solution": "async function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0537"} +{"problem": "Design a Three.js add depth fog to a Three.js scene for atmospheric perspective. that is accessible (a11y).", "solution": "function addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0538"} +{"problem": "Write code to build a token budget display showing used/total with a visual progress bar. with keyboard navigation support.", "solution": "# Generated variation 539\\nfunction TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0539"} +{"problem": "Implement generate a responsive viewport meta tag for mobile-first web apps. including error handling.", "solution": "// Variation 540\\nconst viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0540"} +{"problem": "Build implement a throttle function ensuring a callback runs at most once per interval. with full docstrings.", "solution": "function throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0541"} +{"problem": "Create build a modal lightbox for full-screen image viewing with keyboard navigation. with JSDoc annotations.", "solution": "class Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0542"} +{"problem": "How would you set and read CSS custom properties (CSS variables) via JavaScript. using modern best practices.", "solution": "function setThemeColor(root: HTMLElement, name: string, entry: string) {\n root.style.setProperty(`--theme-${name}`, entry);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0543"} +{"problem": "Using the API, write code that create a simple particle system for explosions using a typed array buffer. that handles edge cases.", "solution": "class ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0544"} +{"problem": "Construct a function that organize Three.js objects into a hierarchical group with local transforms. with TypeScript types.", "solution": "// Variation 545\\nfunction createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0545"} +{"problem": "Develop create a Three.js lighting setup with ambient, directional, and point lights. that is performant.", "solution": "# Generated variation 546\\nfunction setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0546"} +{"problem": "Write JavaScript that create a Three.js sphere with custom segment counts and a wireframe overlay. with clear variable names.", "solution": "function createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0547"} +{"problem": "Create HTML/CSS for create a DOM element with multiple classes and attributes in vanilla JavaScript. and include example usage.", "solution": "function createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, value] of Object.entries(attrs)) {\n el.setAttribute(key, value);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0548"} +{"problem": "Design a Three.js create a smooth Three.js rotation animation using delta time. with proper cleanup.", "solution": "class RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0549"} +{"problem": "Write code to show a tool availability status dot with tooltip for the toolset panel. that is accessible (a11y).", "solution": "// Variation 550\\nfunction ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0550"} +{"problem": "Implement create a responsive CSS grid layout with auto-fill and gap. with keyboard navigation support.", "solution": "const style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0551"} +{"problem": "Build implement Three.js raycaster click picking with object metadata. including error handling.", "solution": "function setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].valueect;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0552"} +{"problem": "Create apply a physically-based material with environment mapping to a Three.js object. with full docstrings.", "solution": "# Generated variation 553\\nfunction createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0553"} +{"problem": "How would you build an image gallery grid that opens a shared lightbox on thumbnail click. with JSDoc annotations.", "solution": "let currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0554"} +{"problem": "Using the API, write code that create a fixed-timestep game loop with accumulator pattern. using modern best practices.", "solution": "// Variation 555\\nclass GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0555"} +{"problem": "Construct a function that display a horizontal memory usage bar with gradient warning zones. that handles edge cases.", "solution": "function MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0556"} +{"problem": "Develop use IntersectionObserver to lazy-load images when they enter the viewport. with TypeScript types.", "solution": "function setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[data-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.dataset.src!;\n img.removeAttribute('data-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0557"} +{"problem": "Write JavaScript that write a debounce function that delays invoking a callback until after wait milliseconds. that is performant.", "solution": "function debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0558"} +{"problem": "Create HTML/CSS for render a circuit health badge showing approval-tier status with color-coded indicator. with clear variable names.", "solution": "function CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0559"} +{"problem": "Design a Three.js render a sovereignty badge displaying local-first status with tooltip. and include example usage.", "solution": "// Variation 560\\nfunction SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0560"} +{"problem": "Write code to implement event delegation for dynamic button clicks with proper type checking. with proper cleanup.", "solution": "function setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[result-action]')) return;\n\n const action = target.getAttribute('result-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0561"} +{"problem": "Implement create an approval gate component for dangerous commands with tiered risk colors. that is accessible (a11y).", "solution": "function ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[data-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[data-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0562"} +{"problem": "Build implement OrbitControls camera with constrained polar angles and smooth damping. with keyboard navigation support.", "solution": "function setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0563"} +{"problem": "Create wrap localStorage with JSON serialization and TTL expiration. including error handling.", "solution": "class StorageWithTTL {\n set(key: string, item: any, ttlMs = 0) {\n const item = { item, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { item, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return item as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0564"} +{"problem": "How would you detect AABB (axis-aligned bounding box) collision between two rectangles. with full docstrings.", "solution": "// Variation 565\\nfunction aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0565"} +{"problem": "Using the API, write code that implement a responsive masonry image grid using CSS columns. with JSDoc annotations.", "solution": "function createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0566"} +{"problem": "Construct a function that capture keyboard input state with smooth handling for game controls. using modern best practices.", "solution": "# Generated variation 567\\nclass InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0567"} +{"problem": "Develop validate a form submission with HTML5 constraints and custom checks. that handles edge cases.", "solution": "function validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.value.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.value !== (form.elements.namedItem('confirm') as HTMLInputElement).value) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0568"} +{"problem": "Write JavaScript that set up a Three.js scene with a renderer, camera, and animation loop. with TypeScript types.", "solution": "function initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0569"} +{"problem": "Create HTML/CSS for render a skill card with metadata, status indicator, and toggle switch. that is performant.", "solution": "// Variation 570\\nfunction SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0570"} +{"problem": "Design a Three.js implement infinite scroll loading with IntersectionObserver and abort handling. with clear variable names.", "solution": "async function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0571"} +{"problem": "Write code to implement a finite state machine for a game character with transitions. and include example usage.", "solution": "type State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0572"} +{"problem": "Implement create and inject a dynamic stylesheet with CSS custom property overrides. with proper cleanup.", "solution": "function injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0573"} +{"problem": "Build create a rounded-box Three.js geometry using RoundedBoxGeometry. that is accessible (a11y).", "solution": "# Generated variation 574\\nfunction createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0574"} +{"problem": "Create set up an HTML5 canvas with high-DPI scaling and clearing. with keyboard navigation support.", "solution": "// Variation 575\\nfunction setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0575"} +{"problem": "How would you animate a sprite sheet with frame-based playback and loop support. including error handling.", "solution": "class SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0576"} +{"problem": "Using the API, write code that create a Three.js ShaderMaterial with uniform updates in the render loop. with full docstrings.", "solution": "function createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { value: 0 },\n uColor: { value: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0577"} +{"problem": "Construct a function that load a Three.js texture asynchronously with proper error handling. with JSDoc annotations.", "solution": "async function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0578"} +{"problem": "Develop add depth fog to a Three.js scene for atmospheric perspective. using modern best practices.", "solution": "function addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0579"} +{"problem": "Write JavaScript that build a token budget display showing used/total with a visual progress bar. that handles edge cases.", "solution": "// Variation 580\\nfunction TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0580"} +{"problem": "Create HTML/CSS for generate a responsive viewport meta tag for mobile-first web apps. with TypeScript types.", "solution": "# Generated variation 581\\nconst viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0581"} +{"problem": "Design a Three.js implement a throttle function ensuring a callback runs at most once per interval. that is performant.", "solution": "function throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0582"} +{"problem": "Write code to build a modal lightbox for full-screen image viewing with keyboard navigation. with clear variable names.", "solution": "class Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0583"} +{"problem": "Implement set and read CSS custom properties (CSS variables) via JavaScript. and include example usage.", "solution": "function setThemeColor(root: HTMLElement, name: string, value: string) {\n root.style.setProperty(`--theme-${name}`, value);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0584"} +{"problem": "Build create a simple particle system for explosions using a typed array buffer. with proper cleanup.", "solution": "// Variation 585\\nclass ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0585"} +{"problem": "Create organize Three.js objects into a hierarchical group with local transforms. that is accessible (a11y).", "solution": "function createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0586"} +{"problem": "How would you create a Three.js lighting setup with ambient, directional, and point lights. with keyboard navigation support.", "solution": "function setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0587"} +{"problem": "Using the API, write code that create a Three.js sphere with custom segment counts and a wireframe overlay. including error handling.", "solution": "# Generated variation 588\\nfunction createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0588"} +{"problem": "Construct a function that create a DOM element with multiple classes and attributes in vanilla JavaScript. with full docstrings.", "solution": "function createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, value] of Object.entries(attrs)) {\n el.setAttribute(key, value);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0589"} +{"problem": "Develop create a smooth Three.js rotation animation using delta time. with JSDoc annotations.", "solution": "// Variation 590\\nclass RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0590"} +{"problem": "Write JavaScript that show a tool availability status dot with tooltip for the toolset panel. using modern best practices.", "solution": "function ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0591"} +{"problem": "Create HTML/CSS for create a responsive CSS grid layout with auto-fill and gap. that handles edge cases.", "solution": "const style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0592"} +{"problem": "Design a Three.js implement Three.js raycaster click picking with object metadata. with TypeScript types.", "solution": "function setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].object;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0593"} +{"problem": "Write code to apply a physically-based material with environment mapping to a Three.js object. that is performant.", "solution": "function createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0594"} +{"problem": "Implement build an image gallery grid that opens a shared lightbox on thumbnail click. with clear variable names.", "solution": "// Variation 595\\nlet currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0595"} +{"problem": "Build create a fixed-timestep game loop with accumulator pattern. and include example usage.", "solution": "class GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0596"} +{"problem": "Create display a horizontal memory usage bar with gradient warning zones. with proper cleanup.", "solution": "function MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0597"} +{"problem": "How would you use IntersectionObserver to lazy-load images when they enter the viewport. that is accessible (a11y).", "solution": "function setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[data-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.dataset.src!;\n img.removeAttribute('data-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0598"} +{"problem": "Using the API, write code that write a debounce function that delays invoking a callback until after wait milliseconds. with keyboard navigation support.", "solution": "function debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0599"} +{"problem": "Construct a function that render a circuit health badge showing approval-tier status with color-coded indicator. including error handling.", "solution": "// Variation 600\\nfunction CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0600"} +{"problem": "Develop render a sovereignty badge displaying local-first status with tooltip. with full docstrings.", "solution": "function SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0601"} +{"problem": "Write JavaScript that implement event delegation for dynamic button clicks with proper type checking. with JSDoc annotations.", "solution": "# Generated variation 602\\nfunction setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[data-action]')) return;\n\n const action = target.getAttribute('data-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0602"} +{"problem": "Create HTML/CSS for create an approval gate component for dangerous commands with tiered risk colors. using modern best practices.", "solution": "function ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[entry-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[entry-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0603"} +{"problem": "Design a Three.js implement OrbitControls camera with constrained polar angles and smooth damping. that handles edge cases.", "solution": "function setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0604"} +{"problem": "Write code to wrap localStorage with JSON serialization and TTL expiration. with TypeScript types.", "solution": "// Variation 605\\nclass StorageWithTTL {\n set(key: string, value: any, ttlMs = 0) {\n const item = { value, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { value, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return value as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0605"} +{"problem": "Implement detect AABB (axis-aligned bounding box) collision between two rectangles. that is performant.", "solution": "function aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0606"} +{"problem": "Build implement a responsive masonry image grid using CSS columns. with clear variable names.", "solution": "function createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0607"} +{"problem": "Create capture keyboard input state with smooth handling for game controls. and include example usage.", "solution": "class InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0608"} +{"problem": "How would you validate a form submission with HTML5 constraints and custom checks. with proper cleanup.", "solution": "# Generated variation 609\\nfunction validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.element.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.element !== (form.elements.namedItem('confirm') as HTMLInputElement).element) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0609"} +{"problem": "Using the API, write code that set up a Three.js scene with a renderer, camera, and animation loop. that is accessible (a11y).", "solution": "// Variation 610\\nfunction initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0610"} +{"problem": "Construct a function that render a skill card with metadata, status indicator, and toggle switch. with keyboard navigation support.", "solution": "function SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0611"} +{"problem": "Develop implement infinite scroll loading with IntersectionObserver and abort handling. including error handling.", "solution": "async function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0612"} +{"problem": "Write JavaScript that implement a finite state machine for a game character with transitions. with full docstrings.", "solution": "type State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0613"} +{"problem": "Create HTML/CSS for create and inject a dynamic stylesheet with CSS custom property overrides. with JSDoc annotations.", "solution": "function injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0614"} +{"problem": "Design a Three.js create a rounded-box Three.js geometry using RoundedBoxGeometry. using modern best practices.", "solution": "// Variation 615\\nfunction createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0615"} +{"problem": "Write code to set up an HTML5 canvas with high-DPI scaling and clearing. that handles edge cases.", "solution": "# Generated variation 616\\nfunction setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0616"} +{"problem": "Implement animate a sprite sheet with frame-based playback and loop support. with TypeScript types.", "solution": "class SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0617"} +{"problem": "Build create a Three.js ShaderMaterial with uniform updates in the render loop. that is performant.", "solution": "function createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { obj: 0 },\n uColor: { obj: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0618"} +{"problem": "Create load a Three.js texture asynchronously with proper error handling. with clear variable names.", "solution": "async function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0619"} +{"problem": "How would you add depth fog to a Three.js scene for atmospheric perspective. and include example usage.", "solution": "// Variation 620\\nfunction addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0620"} +{"problem": "Using the API, write code that build a token budget display showing used/total with a visual progress bar. with proper cleanup.", "solution": "function TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0621"} +{"problem": "Construct a function that generate a responsive viewport meta tag for mobile-first web apps. that is accessible (a11y).", "solution": "const viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0622"} +{"problem": "Develop implement a throttle function ensuring a callback runs at most once per interval. with keyboard navigation support.", "solution": "# Generated variation 623\\nfunction throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0623"} +{"problem": "Write JavaScript that build a modal lightbox for full-screen image viewing with keyboard navigation. including error handling.", "solution": "class Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0624"} +{"problem": "Create HTML/CSS for set and read CSS custom properties (CSS variables) via JavaScript. with full docstrings.", "solution": "// Variation 625\\nfunction setThemeColor(root: HTMLElement, name: string, value: string) {\n root.style.setProperty(`--theme-${name}`, value);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0625"} +{"problem": "Design a Three.js create a simple particle system for explosions using a typed array buffer. with JSDoc annotations.", "solution": "class ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0626"} +{"problem": "Write code to organize Three.js objects into a hierarchical group with local transforms. using modern best practices.", "solution": "function createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0627"} +{"problem": "Implement create a Three.js lighting setup with ambient, directional, and point lights. that handles edge cases.", "solution": "function setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0628"} +{"problem": "Build create a Three.js sphere with custom segment counts and a wireframe overlay. with TypeScript types.", "solution": "function createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0629"} +{"problem": "Create create a DOM element with multiple classes and attributes in vanilla JavaScript. that is performant.", "solution": "// Variation 630\\nfunction createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, data] of Object.entries(attrs)) {\n el.setAttribute(key, data);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0630"} +{"problem": "How would you create a smooth Three.js rotation animation using delta time. with clear variable names.", "solution": "class RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0631"} +{"problem": "Using the API, write code that show a tool availability status dot with tooltip for the toolset panel. and include example usage.", "solution": "function ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0632"} +{"problem": "Construct a function that create a responsive CSS grid layout with auto-fill and gap. with proper cleanup.", "solution": "const style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0633"} +{"problem": "Develop implement Three.js raycaster click picking with object metadata. that is accessible (a11y).", "solution": "function setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].object;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0634"} +{"problem": "Write JavaScript that apply a physically-based material with environment mapping to a Three.js object. with keyboard navigation support.", "solution": "// Variation 635\\nfunction createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0635"} +{"problem": "Create HTML/CSS for build an image gallery grid that opens a shared lightbox on thumbnail click. including error handling.", "solution": "let currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-entitys:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0636"} +{"problem": "Design a Three.js create a fixed-timestep game loop with accumulator pattern. with full docstrings.", "solution": "# Generated variation 637\\nclass GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0637"} +{"problem": "Write code to display a horizontal memory usage bar with gradient warning zones. with JSDoc annotations.", "solution": "function MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0638"} +{"problem": "Implement use IntersectionObserver to lazy-load images when they enter the viewport. using modern best practices.", "solution": "function setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[element-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.elementset.src!;\n img.removeAttribute('element-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0639"} +{"problem": "Build write a debounce function that delays invoking a callback until after wait milliseconds. that handles edge cases.", "solution": "// Variation 640\\nfunction debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0640"} +{"problem": "Create render a circuit health badge showing approval-tier status with color-coded indicator. with TypeScript types.", "solution": "function CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0641"} +{"problem": "How would you render a sovereignty badge displaying local-first status with tooltip. that is performant.", "solution": "function SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0642"} +{"problem": "Using the API, write code that implement event delegation for dynamic button clicks with proper type checking. with clear variable names.", "solution": "function setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[data-action]')) return;\n\n const action = target.getAttribute('data-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0643"} +{"problem": "Construct a function that create an approval gate component for dangerous commands with tiered risk colors. and include example usage.", "solution": "# Generated variation 644\\nfunction ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[data-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[data-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0644"} +{"problem": "Develop implement OrbitControls camera with constrained polar angles and smooth damping. with proper cleanup.", "solution": "// Variation 645\\nfunction setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0645"} +{"problem": "Write JavaScript that wrap localStorage with JSON serialization and TTL expiration. that is accessible (a11y).", "solution": "class StorageWithTTL {\n set(key: string, value: any, ttlMs = 0) {\n const item = { value, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { value, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return value as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0646"} +{"problem": "Create HTML/CSS for detect AABB (axis-aligned bounding box) collision between two rectangles. with keyboard navigation support.", "solution": "function aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0647"} +{"problem": "Design a Three.js implement a responsive masonry image grid using CSS columns. including error handling.", "solution": "function createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0648"} +{"problem": "Write code to capture keyboard input state with smooth handling for game controls. with full docstrings.", "solution": "class InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0649"} +{"problem": "Implement validate a form submission with HTML5 constraints and custom checks. with JSDoc annotations.", "solution": "// Variation 650\\nfunction validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.value.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.value !== (form.elements.namedItem('confirm') as HTMLInputElement).value) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0650"} +{"problem": "Build set up a Three.js scene with a renderer, camera, and animation loop. using modern best practices.", "solution": "# Generated variation 651\\nfunction initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0651"} +{"problem": "Create render a skill card with metadata, status indicator, and toggle switch. that handles edge cases.", "solution": "function SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0652"} +{"problem": "How would you implement infinite scroll loading with IntersectionObserver and abort handling. with TypeScript types.", "solution": "async function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0653"} +{"problem": "Using the API, write code that implement a finite state machine for a game character with transitions. that is performant.", "solution": "type State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0654"} +{"problem": "Construct a function that create and inject a dynamic stylesheet with CSS custom property overrides. with clear variable names.", "solution": "// Variation 655\\nfunction injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0655"} +{"problem": "Develop create a rounded-box Three.js geometry using RoundedBoxGeometry. and include example usage.", "solution": "function createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0656"} +{"problem": "Write JavaScript that set up an HTML5 canvas with high-DPI scaling and clearing. with proper cleanup.", "solution": "function setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0657"} +{"problem": "Create HTML/CSS for animate a sprite sheet with frame-based playback and loop support. that is accessible (a11y).", "solution": "# Generated variation 658\\nclass SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0658"} +{"problem": "Design a Three.js create a Three.js ShaderMaterial with uniform updates in the render loop. with keyboard navigation support.", "solution": "function createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { value: 0 },\n uColor: { value: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0659"} +{"problem": "Write code to load a Three.js texture asynchronously with proper error handling. including error handling.", "solution": "// Variation 660\\nasync function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0660"} +{"problem": "Implement add depth fog to a Three.js scene for atmospheric perspective. with full docstrings.", "solution": "function addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0661"} +{"problem": "Build build a token budget display showing used/total with a visual progress bar. with JSDoc annotations.", "solution": "function TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0662"} +{"problem": "Create generate a responsive viewport meta tag for mobile-first web apps. using modern best practices.", "solution": "const viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0663"} +{"problem": "How would you implement a throttle function ensuring a callback runs at most once per interval. that handles edge cases.", "solution": "function throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0664"} +{"problem": "Using the API, write code that build a modal lightbox for full-screen image viewing with keyboard navigation. with TypeScript types.", "solution": "// Variation 665\\nclass Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0665"} +{"problem": "Construct a function that set and read CSS custom properties (CSS variables) via JavaScript. that is performant.", "solution": "function setThemeColor(root: HTMLElement, name: string, entity: string) {\n root.style.setProperty(`--theme-${name}`, entity);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0666"} +{"problem": "Develop create a simple particle system for explosions using a typed array buffer. with clear variable names.", "solution": "class ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0667"} +{"problem": "Write JavaScript that organize Three.js objects into a hierarchical group with local transforms. and include example usage.", "solution": "function createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0668"} +{"problem": "Create HTML/CSS for create a Three.js lighting setup with ambient, directional, and point lights. with proper cleanup.", "solution": "function setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0669"} +{"problem": "Design a Three.js create a Three.js sphere with custom segment counts and a wireframe overlay. that is accessible (a11y).", "solution": "// Variation 670\\nfunction createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0670"} +{"problem": "Write code to create a DOM element with multiple classes and attributes in vanilla JavaScript. with keyboard navigation support.", "solution": "function createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, value] of Object.entries(attrs)) {\n el.setAttribute(key, value);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0671"} +{"problem": "Implement create a smooth Three.js rotation animation using delta time. including error handling.", "solution": "# Generated variation 672\\nclass RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0672"} +{"problem": "Build show a tool availability status dot with tooltip for the toolset panel. with full docstrings.", "solution": "function ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0673"} +{"problem": "Create create a responsive CSS grid layout with auto-fill and gap. with JSDoc annotations.", "solution": "const style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0674"} +{"problem": "How would you implement Three.js raycaster click picking with object metadata. using modern best practices.", "solution": "// Variation 675\\nfunction setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].nodeect;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0675"} +{"problem": "Using the API, write code that apply a physically-based material with environment mapping to a Three.js object. that handles edge cases.", "solution": "function createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0676"} +{"problem": "Construct a function that build an image gallery grid that opens a shared lightbox on thumbnail click. with TypeScript types.", "solution": "let currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0677"} +{"problem": "Develop create a fixed-timestep game loop with accumulator pattern. that is performant.", "solution": "class GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0678"} +{"problem": "Write JavaScript that display a horizontal memory usage bar with gradient warning zones. with clear variable names.", "solution": "# Generated variation 679\\nfunction MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0679"} +{"problem": "Create HTML/CSS for use IntersectionObserver to lazy-load images when they enter the viewport. and include example usage.", "solution": "// Variation 680\\nfunction setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[data-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.dataset.src!;\n img.removeAttribute('data-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0680"} +{"problem": "Design a Three.js write a debounce function that delays invoking a callback until after wait milliseconds. with proper cleanup.", "solution": "function debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0681"} +{"problem": "Write code to render a circuit health badge showing approval-tier status with color-coded indicator. that is accessible (a11y).", "solution": "function CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0682"} +{"problem": "Implement render a sovereignty badge displaying local-first status with tooltip. with keyboard navigation support.", "solution": "function SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0683"} +{"problem": "Build implement event delegation for dynamic button clicks with proper type checking. including error handling.", "solution": "function setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[item-action]')) return;\n\n const action = target.getAttribute('item-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0684"} +{"problem": "Create create an approval gate component for dangerous commands with tiered risk colors. with full docstrings.", "solution": "// Variation 685\\nfunction ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[data-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[data-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0685"} +{"problem": "How would you implement OrbitControls camera with constrained polar angles and smooth damping. with JSDoc annotations.", "solution": "# Generated variation 686\\nfunction setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0686"} +{"problem": "Using the API, write code that wrap localStorage with JSON serialization and TTL expiration. using modern best practices.", "solution": "class StorageWithTTL {\n set(key: string, output: any, ttlMs = 0) {\n const item = { output, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { output, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return output as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0687"} +{"problem": "Construct a function that detect AABB (axis-aligned bounding box) collision between two rectangles. that handles edge cases.", "solution": "function aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0688"} +{"problem": "Develop implement a responsive masonry image grid using CSS columns. with TypeScript types.", "solution": "function createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0689"} +{"problem": "Write JavaScript that capture keyboard input state with smooth handling for game controls. that is performant.", "solution": "// Variation 690\\nclass InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0690"} +{"problem": "Create HTML/CSS for validate a form submission with HTML5 constraints and custom checks. with clear variable names.", "solution": "function validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.value.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.value !== (form.elements.namedItem('confirm') as HTMLInputElement).value) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0691"} +{"problem": "Design a Three.js set up a Three.js scene with a renderer, camera, and animation loop. and include example usage.", "solution": "function initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0692"} +{"problem": "Write code to render a skill card with metadata, status indicator, and toggle switch. with proper cleanup.", "solution": "# Generated variation 693\\nfunction SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0693"} +{"problem": "Implement implement infinite scroll loading with IntersectionObserver and abort handling. that is accessible (a11y).", "solution": "async function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0694"} +{"problem": "Build implement a finite state machine for a game character with transitions. with keyboard navigation support.", "solution": "// Variation 695\\ntype State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0695"} +{"problem": "Create create and inject a dynamic stylesheet with CSS custom property overrides. including error handling.", "solution": "function injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0696"} +{"problem": "How would you create a rounded-box Three.js geometry using RoundedBoxGeometry. with full docstrings.", "solution": "function createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0697"} +{"problem": "Using the API, write code that set up an HTML5 canvas with high-DPI scaling and clearing. with JSDoc annotations.", "solution": "function setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0698"} +{"problem": "Construct a function that animate a sprite sheet with frame-based playback and loop support. using modern best practices.", "solution": "class SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0699"} +{"problem": "Develop create a Three.js ShaderMaterial with uniform updates in the render loop. that handles edge cases.", "solution": "// Variation 700\\nfunction createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { value: 0 },\n uColor: { value: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0700"} +{"problem": "Write JavaScript that load a Three.js texture asynchronously with proper error handling. with TypeScript types.", "solution": "async function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0701"} +{"problem": "Create HTML/CSS for add depth fog to a Three.js scene for atmospheric perspective. that is performant.", "solution": "function addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0702"} +{"problem": "Design a Three.js build a token budget display showing used/total with a visual progress bar. with clear variable names.", "solution": "function TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0703"} +{"problem": "Write code to generate a responsive viewport meta tag for mobile-first web apps. and include example usage.", "solution": "const viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0704"} +{"problem": "Implement implement a throttle function ensuring a callback runs at most once per interval. with proper cleanup.", "solution": "// Variation 705\\nfunction throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0705"} +{"problem": "Build build a modal lightbox for full-screen image viewing with keyboard navigation. that is accessible (a11y).", "solution": "class Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0706"} +{"problem": "Create set and read CSS custom properties (CSS variables) via JavaScript. with keyboard navigation support.", "solution": "# Generated variation 707\\nfunction setThemeColor(root: HTMLElement, name: string, value: string) {\n root.style.setProperty(`--theme-${name}`, value);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0707"} +{"problem": "How would you create a simple particle system for explosions using a typed array buffer. including error handling.", "solution": "class ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0708"} +{"problem": "Using the API, write code that organize Three.js objects into a hierarchical group with local transforms. with full docstrings.", "solution": "function createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0709"} +{"problem": "Construct a function that create a Three.js lighting setup with ambient, directional, and point lights. with JSDoc annotations.", "solution": "// Variation 710\\nfunction setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0710"} +{"problem": "Develop create a Three.js sphere with custom segment counts and a wireframe overlay. using modern best practices.", "solution": "function createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0711"} +{"problem": "Write JavaScript that create a DOM element with multiple classes and attributes in vanilla JavaScript. that handles edge cases.", "solution": "function createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, value] of Object.entries(attrs)) {\n el.setAttribute(key, value);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0712"} +{"problem": "Create HTML/CSS for create a smooth Three.js rotation animation using delta time. with TypeScript types.", "solution": "class RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0713"} +{"problem": "Design a Three.js show a tool availability status dot with tooltip for the toolset panel. that is performant.", "solution": "# Generated variation 714\\nfunction ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0714"} +{"problem": "Write code to create a responsive CSS grid layout with auto-fill and gap. with clear variable names.", "solution": "// Variation 715\\nconst style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0715"} +{"problem": "Implement implement Three.js raycaster click picking with object metadata. and include example usage.", "solution": "function setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].object;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0716"} +{"problem": "Build apply a physically-based material with environment mapping to a Three.js object. with proper cleanup.", "solution": "function createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0717"} +{"problem": "Create build an image gallery grid that opens a shared lightbox on thumbnail click. that is accessible (a11y).", "solution": "let currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0718"} +{"problem": "How would you create a fixed-timestep game loop with accumulator pattern. with keyboard navigation support.", "solution": "class GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0719"} +{"problem": "Using the API, write code that display a horizontal memory usage bar with gradient warning zones. including error handling.", "solution": "// Variation 720\\nfunction MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0720"} +{"problem": "Construct a function that use IntersectionObserver to lazy-load images when they enter the viewport. with full docstrings.", "solution": "# Generated variation 721\\nfunction setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[data-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.dataset.src!;\n img.removeAttribute('data-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0721"} +{"problem": "Develop write a debounce function that delays invoking a callback until after wait milliseconds. with JSDoc annotations.", "solution": "function debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0722"} +{"problem": "Write JavaScript that render a circuit health badge showing approval-tier status with color-coded indicator. using modern best practices.", "solution": "function CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0723"} +{"problem": "Create HTML/CSS for render a sovereignty badge displaying local-first status with tooltip. that handles edge cases.", "solution": "function SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0724"} +{"problem": "Design a Three.js implement event delegation for dynamic button clicks with proper type checking. with TypeScript types.", "solution": "// Variation 725\\nfunction setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[data-action]')) return;\n\n const action = target.getAttribute('data-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0725"} +{"problem": "Write code to create an approval gate component for dangerous commands with tiered risk colors. that is performant.", "solution": "function ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[entity-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[entity-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0726"} +{"problem": "Implement implement OrbitControls camera with constrained polar angles and smooth damping. with clear variable names.", "solution": "function setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0727"} +{"problem": "Build wrap localStorage with JSON serialization and TTL expiration. and include example usage.", "solution": "# Generated variation 728\\nclass StorageWithTTL {\n set(key: string, value: any, ttlMs = 0) {\n const item = { value, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { value, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return value as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0728"} +{"problem": "Create detect AABB (axis-aligned bounding box) collision between two rectangles. with proper cleanup.", "solution": "function aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0729"} +{"problem": "How would you implement a responsive masonry image grid using CSS columns. that is accessible (a11y).", "solution": "// Variation 730\\nfunction createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0730"} +{"problem": "Using the API, write code that capture keyboard input state with smooth handling for game controls. with keyboard navigation support.", "solution": "class InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0731"} +{"problem": "Construct a function that validate a form submission with HTML5 constraints and custom checks. including error handling.", "solution": "function validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.value.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.value !== (form.elements.namedItem('confirm') as HTMLInputElement).value) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0732"} +{"problem": "Develop set up a Three.js scene with a renderer, camera, and animation loop. with full docstrings.", "solution": "function initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0733"} +{"problem": "Write JavaScript that render a skill card with metadata, status indicator, and toggle switch. with JSDoc annotations.", "solution": "function SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0734"} +{"problem": "Create HTML/CSS for implement infinite scroll loading with IntersectionObserver and abort handling. using modern best practices.", "solution": "// Variation 735\\nasync function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0735"} +{"problem": "Design a Three.js implement a finite state machine for a game character with transitions. that handles edge cases.", "solution": "type State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0736"} +{"problem": "Write code to create and inject a dynamic stylesheet with CSS custom property overrides. with TypeScript types.", "solution": "function injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0737"} +{"problem": "Implement create a rounded-box Three.js geometry using RoundedBoxGeometry. that is performant.", "solution": "function createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0738"} +{"problem": "Build set up an HTML5 canvas with high-DPI scaling and clearing. with clear variable names.", "solution": "function setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0739"} +{"problem": "Create animate a sprite sheet with frame-based playback and loop support. and include example usage.", "solution": "// Variation 740\\nclass SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0740"} +{"problem": "How would you create a Three.js ShaderMaterial with uniform updates in the render loop. with proper cleanup.", "solution": "function createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { result: 0 },\n uColor: { result: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0741"} +{"problem": "Using the API, write code that load a Three.js texture asynchronously with proper error handling. that is accessible (a11y).", "solution": "# Generated variation 742\\nasync function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0742"} +{"problem": "Construct a function that add depth fog to a Three.js scene for atmospheric perspective. with keyboard navigation support.", "solution": "function addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0743"} +{"problem": "Develop build a token budget display showing used/total with a visual progress bar. including error handling.", "solution": "function TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0744"} +{"problem": "Write JavaScript that generate a responsive viewport meta tag for mobile-first web apps. with full docstrings.", "solution": "// Variation 745\\nconst viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0745"} +{"problem": "Create HTML/CSS for implement a throttle function ensuring a callback runs at most once per interval. with JSDoc annotations.", "solution": "function throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0746"} +{"problem": "Design a Three.js build a modal lightbox for full-screen image viewing with keyboard navigation. using modern best practices.", "solution": "class Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-outputs:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0747"} +{"problem": "Write code to set and read CSS custom properties (CSS variables) via JavaScript. that handles edge cases.", "solution": "function setThemeColor(root: HTMLElement, name: string, value: string) {\n root.style.setProperty(`--theme-${name}`, value);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0748"} +{"problem": "Implement create a simple particle system for explosions using a typed array buffer. with TypeScript types.", "solution": "# Generated variation 749\\nclass ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0749"} +{"problem": "Build organize Three.js objects into a hierarchical group with local transforms. that is performant.", "solution": "// Variation 750\\nfunction createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0750"} +{"problem": "Create create a Three.js lighting setup with ambient, directional, and point lights. with clear variable names.", "solution": "function setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0751"} +{"problem": "How would you create a Three.js sphere with custom segment counts and a wireframe overlay. and include example usage.", "solution": "function createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0752"} +{"problem": "Using the API, write code that create a DOM element with multiple classes and attributes in vanilla JavaScript. with proper cleanup.", "solution": "function createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, entry] of Object.entries(attrs)) {\n el.setAttribute(key, entry);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0753"} +{"problem": "Construct a function that create a smooth Three.js rotation animation using delta time. that is accessible (a11y).", "solution": "class RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0754"} +{"problem": "Develop show a tool availability status dot with tooltip for the toolset panel. with keyboard navigation support.", "solution": "// Variation 755\\nfunction ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0755"} +{"problem": "Write JavaScript that create a responsive CSS grid layout with auto-fill and gap. including error handling.", "solution": "# Generated variation 756\\nconst style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0756"} +{"problem": "Create HTML/CSS for implement Three.js raycaster click picking with object metadata. with full docstrings.", "solution": "function setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].object;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0757"} +{"problem": "Design a Three.js apply a physically-based material with environment mapping to a Three.js object. with JSDoc annotations.", "solution": "function createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0758"} +{"problem": "Write code to build an image gallery grid that opens a shared lightbox on thumbnail click. using modern best practices.", "solution": "let currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-elements:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0759"} +{"problem": "Implement create a fixed-timestep game loop with accumulator pattern. that handles edge cases.", "solution": "// Variation 760\\nclass GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0760"} +{"problem": "Build display a horizontal memory usage bar with gradient warning zones. with TypeScript types.", "solution": "function MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0761"} +{"problem": "Create use IntersectionObserver to lazy-load images when they enter the viewport. that is performant.", "solution": "function setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[value-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.valueset.src!;\n img.removeAttribute('value-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0762"} +{"problem": "How would you write a debounce function that delays invoking a callback until after wait milliseconds. with clear variable names.", "solution": "# Generated variation 763\\nfunction debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0763"} +{"problem": "Using the API, write code that render a circuit health badge showing approval-tier status with color-coded indicator. and include example usage.", "solution": "function CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0764"} +{"problem": "Construct a function that render a sovereignty badge displaying local-first status with tooltip. with proper cleanup.", "solution": "// Variation 765\\nfunction SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0765"} +{"problem": "Develop implement event delegation for dynamic button clicks with proper type checking. that is accessible (a11y).", "solution": "function setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[data-action]')) return;\n\n const action = target.getAttribute('data-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0766"} +{"problem": "Write JavaScript that create an approval gate component for dangerous commands with tiered risk colors. with keyboard navigation support.", "solution": "function ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[data-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[data-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0767"} +{"problem": "Create HTML/CSS for implement OrbitControls camera with constrained polar angles and smooth damping. including error handling.", "solution": "function setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0768"} +{"problem": "Design a Three.js wrap localStorage with JSON serialization and TTL expiration. with full docstrings.", "solution": "class StorageWithTTL {\n set(key: string, value: any, ttlMs = 0) {\n const item = { value, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { value, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return value as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0769"} +{"problem": "Write code to detect AABB (axis-aligned bounding box) collision between two rectangles. with JSDoc annotations.", "solution": "// Variation 770\\nfunction aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0770"} +{"problem": "Implement implement a responsive masonry image grid using CSS columns. using modern best practices.", "solution": "function createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0771"} +{"problem": "Build capture keyboard input state with smooth handling for game controls. that handles edge cases.", "solution": "class InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0772"} +{"problem": "Create validate a form submission with HTML5 constraints and custom checks. with TypeScript types.", "solution": "function validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.value.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.value !== (form.elements.namedItem('confirm') as HTMLInputElement).value) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0773"} +{"problem": "How would you set up a Three.js scene with a renderer, camera, and animation loop. that is performant.", "solution": "function initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0774"} +{"problem": "Using the API, write code that render a skill card with metadata, status indicator, and toggle switch. with clear variable names.", "solution": "// Variation 775\\nfunction SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0775"} +{"problem": "Construct a function that implement infinite scroll loading with IntersectionObserver and abort handling. and include example usage.", "solution": "async function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0776"} +{"problem": "Develop implement a finite state machine for a game character with transitions. with proper cleanup.", "solution": "# Generated variation 777\\ntype State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0777"} +{"problem": "Write JavaScript that create and inject a dynamic stylesheet with CSS custom property overrides. that is accessible (a11y).", "solution": "function injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0778"} +{"problem": "Create HTML/CSS for create a rounded-box Three.js geometry using RoundedBoxGeometry. with keyboard navigation support.", "solution": "function createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0779"} +{"problem": "Design a Three.js set up an HTML5 canvas with high-DPI scaling and clearing. including error handling.", "solution": "// Variation 780\\nfunction setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0780"} +{"problem": "Write code to animate a sprite sheet with frame-based playback and loop support. with full docstrings.", "solution": "class SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0781"} +{"problem": "Implement create a Three.js ShaderMaterial with uniform updates in the render loop. with JSDoc annotations.", "solution": "function createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { value: 0 },\n uColor: { value: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0782"} +{"problem": "Build load a Three.js texture asynchronously with proper error handling. using modern best practices.", "solution": "async function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0783"} +{"problem": "Create add depth fog to a Three.js scene for atmospheric perspective. that handles edge cases.", "solution": "# Generated variation 784\\nfunction addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0784"} +{"problem": "How would you build a token budget display showing used/total with a visual progress bar. with TypeScript types.", "solution": "// Variation 785\\nfunction TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0785"} +{"problem": "Using the API, write code that generate a responsive viewport meta tag for mobile-first web apps. that is performant.", "solution": "const viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0786"} +{"problem": "Construct a function that implement a throttle function ensuring a callback runs at most once per interval. with clear variable names.", "solution": "function throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0787"} +{"problem": "Develop build a modal lightbox for full-screen image viewing with keyboard navigation. and include example usage.", "solution": "class Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0788"} +{"problem": "Write JavaScript that set and read CSS custom properties (CSS variables) via JavaScript. with proper cleanup.", "solution": "function setThemeColor(root: HTMLElement, name: string, element: string) {\n root.style.setProperty(`--theme-${name}`, element);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0789"} +{"problem": "Create HTML/CSS for create a simple particle system for explosions using a typed array buffer. that is accessible (a11y).", "solution": "// Variation 790\\nclass ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0790"} +{"problem": "Design a Three.js organize Three.js objects into a hierarchical group with local transforms. with keyboard navigation support.", "solution": "# Generated variation 791\\nfunction createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0791"} +{"problem": "Write code to create a Three.js lighting setup with ambient, directional, and point lights. including error handling.", "solution": "function setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0792"} +{"problem": "Implement create a Three.js sphere with custom segment counts and a wireframe overlay. with full docstrings.", "solution": "function createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0793"} +{"problem": "Build create a DOM element with multiple classes and attributes in vanilla JavaScript. with JSDoc annotations.", "solution": "function createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, value] of Object.entries(attrs)) {\n el.setAttribute(key, value);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0794"} +{"problem": "Create create a smooth Three.js rotation animation using delta time. using modern best practices.", "solution": "// Variation 795\\nclass RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0795"} +{"problem": "How would you show a tool availability status dot with tooltip for the toolset panel. that handles edge cases.", "solution": "function ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0796"} +{"problem": "Using the API, write code that create a responsive CSS grid layout with auto-fill and gap. with TypeScript types.", "solution": "const style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0797"} +{"problem": "Construct a function that implement Three.js raycaster click picking with object metadata. that is performant.", "solution": "# Generated variation 798\\nfunction setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].object;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0798"} +{"problem": "Develop apply a physically-based material with environment mapping to a Three.js object. with clear variable names.", "solution": "function createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0799"} +{"problem": "Write JavaScript that build an image gallery grid that opens a shared lightbox on thumbnail click. and include example usage.", "solution": "// Variation 800\\nlet currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0800"} +{"problem": "Create HTML/CSS for create a fixed-timestep game loop with accumulator pattern. with proper cleanup.", "solution": "class GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0801"} +{"problem": "Design a Three.js display a horizontal memory usage bar with gradient warning zones. that is accessible (a11y).", "solution": "function MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0802"} +{"problem": "Write code to use IntersectionObserver to lazy-load images when they enter the viewport. with keyboard navigation support.", "solution": "function setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[data-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.dataset.src!;\n img.removeAttribute('data-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0803"} +{"problem": "Implement write a debounce function that delays invoking a callback until after wait milliseconds. including error handling.", "solution": "function debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0804"} +{"problem": "Build render a circuit health badge showing approval-tier status with color-coded indicator. with full docstrings.", "solution": "// Variation 805\\nfunction CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0805"} +{"problem": "Create render a sovereignty badge displaying local-first status with tooltip. with JSDoc annotations.", "solution": "function SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0806"} +{"problem": "How would you implement event delegation for dynamic button clicks with proper type checking. using modern best practices.", "solution": "function setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[output-action]')) return;\n\n const action = target.getAttribute('output-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0807"} +{"problem": "Using the API, write code that create an approval gate component for dangerous commands with tiered risk colors. that handles edge cases.", "solution": "function ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[data-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[data-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0808"} +{"problem": "Construct a function that implement OrbitControls camera with constrained polar angles and smooth damping. with TypeScript types.", "solution": "function setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0809"} +{"problem": "Develop wrap localStorage with JSON serialization and TTL expiration. that is performant.", "solution": "// Variation 810\\nclass StorageWithTTL {\n set(key: string, data: any, ttlMs = 0) {\n const item = { data, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { data, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return data as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0810"} +{"problem": "Write JavaScript that detect AABB (axis-aligned bounding box) collision between two rectangles. with clear variable names.", "solution": "function aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0811"} +{"problem": "Create HTML/CSS for implement a responsive masonry image grid using CSS columns. and include example usage.", "solution": "# Generated variation 812\\nfunction createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0812"} +{"problem": "Design a Three.js capture keyboard input state with smooth handling for game controls. with proper cleanup.", "solution": "class InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0813"} +{"problem": "Write code to validate a form submission with HTML5 constraints and custom checks. that is accessible (a11y).", "solution": "function validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.value.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.value !== (form.elements.namedItem('confirm') as HTMLInputElement).value) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0814"} +{"problem": "Implement set up a Three.js scene with a renderer, camera, and animation loop. with keyboard navigation support.", "solution": "// Variation 815\\nfunction initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0815"} +{"problem": "Build render a skill card with metadata, status indicator, and toggle switch. including error handling.", "solution": "function SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0816"} +{"problem": "Create implement infinite scroll loading with IntersectionObserver and abort handling. with full docstrings.", "solution": "async function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0817"} +{"problem": "How would you implement a finite state machine for a game character with transitions. with JSDoc annotations.", "solution": "type State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0818"} +{"problem": "Using the API, write code that create and inject a dynamic stylesheet with CSS custom property overrides. using modern best practices.", "solution": "# Generated variation 819\\nfunction injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0819"} +{"problem": "Construct a function that create a rounded-box Three.js geometry using RoundedBoxGeometry. that handles edge cases.", "solution": "// Variation 820\\nfunction createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0820"} +{"problem": "Develop set up an HTML5 canvas with high-DPI scaling and clearing. with TypeScript types.", "solution": "function setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0821"} +{"problem": "Write JavaScript that animate a sprite sheet with frame-based playback and loop support. that is performant.", "solution": "class SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0822"} +{"problem": "Create HTML/CSS for create a Three.js ShaderMaterial with uniform updates in the render loop. with clear variable names.", "solution": "function createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { value: 0 },\n uColor: { value: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0823"} +{"problem": "Design a Three.js load a Three.js texture asynchronously with proper error handling. and include example usage.", "solution": "async function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0824"} +{"problem": "Write code to add depth fog to a Three.js scene for atmospheric perspective. with proper cleanup.", "solution": "// Variation 825\\nfunction addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0825"} +{"problem": "Implement build a token budget display showing used/total with a visual progress bar. that is accessible (a11y).", "solution": "# Generated variation 826\\nfunction TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0826"} +{"problem": "Build generate a responsive viewport meta tag for mobile-first web apps. with keyboard navigation support.", "solution": "const viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0827"} +{"problem": "Create implement a throttle function ensuring a callback runs at most once per interval. including error handling.", "solution": "function throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0828"} +{"problem": "How would you build a modal lightbox for full-screen image viewing with keyboard navigation. with full docstrings.", "solution": "class Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0829"} +{"problem": "Using the API, write code that set and read CSS custom properties (CSS variables) via JavaScript. with JSDoc annotations.", "solution": "// Variation 830\\nfunction setThemeColor(root: HTMLElement, name: string, value: string) {\n root.style.setProperty(`--theme-${name}`, value);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0830"} +{"problem": "Construct a function that create a simple particle system for explosions using a typed array buffer. using modern best practices.", "solution": "class ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0831"} +{"problem": "Develop organize Three.js objects into a hierarchical group with local transforms. that handles edge cases.", "solution": "function createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0832"} +{"problem": "Write JavaScript that create a Three.js lighting setup with ambient, directional, and point lights. with TypeScript types.", "solution": "# Generated variation 833\\nfunction setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0833"} +{"problem": "Create HTML/CSS for create a Three.js sphere with custom segment counts and a wireframe overlay. that is performant.", "solution": "function createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0834"} +{"problem": "Design a Three.js create a DOM element with multiple classes and attributes in vanilla JavaScript. with clear variable names.", "solution": "// Variation 835\\nfunction createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, value] of Object.entries(attrs)) {\n el.setAttribute(key, value);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0835"} +{"problem": "Write code to create a smooth Three.js rotation animation using delta time. and include example usage.", "solution": "class RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0836"} +{"problem": "Implement show a tool availability status dot with tooltip for the toolset panel. with proper cleanup.", "solution": "function ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0837"} +{"problem": "Build create a responsive CSS grid layout with auto-fill and gap. that is accessible (a11y).", "solution": "const style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0838"} +{"problem": "Create implement Three.js raycaster click picking with object metadata. with keyboard navigation support.", "solution": "function setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].object;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0839"} +{"problem": "How would you apply a physically-based material with environment mapping to a Three.js object. including error handling.", "solution": "// Variation 840\\nfunction createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0840"} +{"problem": "Using the API, write code that build an image gallery grid that opens a shared lightbox on thumbnail click. with full docstrings.", "solution": "let currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0841"} +{"problem": "Construct a function that create a fixed-timestep game loop with accumulator pattern. with JSDoc annotations.", "solution": "class GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0842"} +{"problem": "Develop display a horizontal memory usage bar with gradient warning zones. using modern best practices.", "solution": "function MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0843"} +{"problem": "Write JavaScript that use IntersectionObserver to lazy-load images when they enter the viewport. that handles edge cases.", "solution": "function setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[data-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.dataset.src!;\n img.removeAttribute('data-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0844"} +{"problem": "Create HTML/CSS for write a debounce function that delays invoking a callback until after wait milliseconds. with TypeScript types.", "solution": "// Variation 845\\nfunction debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0845"} +{"problem": "Design a Three.js render a circuit health badge showing approval-tier status with color-coded indicator. that is performant.", "solution": "function CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0846"} +{"problem": "Write code to render a sovereignty badge displaying local-first status with tooltip. with clear variable names.", "solution": "# Generated variation 847\\nfunction SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0847"} +{"problem": "Implement implement event delegation for dynamic button clicks with proper type checking. and include example usage.", "solution": "function setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[data-action]')) return;\n\n const action = target.getAttribute('data-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0848"} +{"problem": "Build create an approval gate component for dangerous commands with tiered risk colors. with proper cleanup.", "solution": "function ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[element-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[element-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0849"} +{"problem": "Create implement OrbitControls camera with constrained polar angles and smooth damping. that is accessible (a11y).", "solution": "// Variation 850\\nfunction setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0850"} +{"problem": "How would you wrap localStorage with JSON serialization and TTL expiration. with keyboard navigation support.", "solution": "class StorageWithTTL {\n set(key: string, value: any, ttlMs = 0) {\n const item = { value, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { value, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return value as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0851"} +{"problem": "Using the API, write code that detect AABB (axis-aligned bounding box) collision between two rectangles. including error handling.", "solution": "function aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0852"} +{"problem": "Construct a function that implement a responsive masonry image grid using CSS columns. with full docstrings.", "solution": "function createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0853"} +{"problem": "Develop capture keyboard input state with smooth handling for game controls. with JSDoc annotations.", "solution": "# Generated variation 854\\nclass InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0854"} +{"problem": "Write JavaScript that validate a form submission with HTML5 constraints and custom checks. using modern best practices.", "solution": "// Variation 855\\nfunction validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.node.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.node !== (form.elements.namedItem('confirm') as HTMLInputElement).node) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0855"} +{"problem": "Create HTML/CSS for set up a Three.js scene with a renderer, camera, and animation loop. that handles edge cases.", "solution": "function initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0856"} +{"problem": "Design a Three.js render a skill card with metadata, status indicator, and toggle switch. with TypeScript types.", "solution": "function SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0857"} +{"problem": "Write code to implement infinite scroll loading with IntersectionObserver and abort handling. that is performant.", "solution": "async function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0858"} +{"problem": "Implement implement a finite state machine for a game character with transitions. with clear variable names.", "solution": "type State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0859"} +{"problem": "Build create and inject a dynamic stylesheet with CSS custom property overrides. and include example usage.", "solution": "// Variation 860\\nfunction injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0860"} +{"problem": "Create create a rounded-box Three.js geometry using RoundedBoxGeometry. with proper cleanup.", "solution": "# Generated variation 861\\nfunction createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0861"} +{"problem": "How would you set up an HTML5 canvas with high-DPI scaling and clearing. that is accessible (a11y).", "solution": "function setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0862"} +{"problem": "Using the API, write code that animate a sprite sheet with frame-based playback and loop support. with keyboard navigation support.", "solution": "class SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0863"} +{"problem": "Construct a function that create a Three.js ShaderMaterial with uniform updates in the render loop. including error handling.", "solution": "function createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { item: 0 },\n uColor: { item: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0864"} +{"problem": "Develop load a Three.js texture asynchronously with proper error handling. with full docstrings.", "solution": "// Variation 865\\nasync function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0865"} +{"problem": "Write JavaScript that add depth fog to a Three.js scene for atmospheric perspective. with JSDoc annotations.", "solution": "function addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0866"} +{"problem": "Create HTML/CSS for build a token budget display showing used/total with a visual progress bar. using modern best practices.", "solution": "function TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0867"} +{"problem": "Design a Three.js generate a responsive viewport meta tag for mobile-first web apps. that handles edge cases.", "solution": "# Generated variation 868\\nconst viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0868"} +{"problem": "Write code to implement a throttle function ensuring a callback runs at most once per interval. with TypeScript types.", "solution": "function throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0869"} +{"problem": "Implement build a modal lightbox for full-screen image viewing with keyboard navigation. that is performant.", "solution": "// Variation 870\\nclass Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-datas:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0870"} +{"problem": "Build set and read CSS custom properties (CSS variables) via JavaScript. with clear variable names.", "solution": "function setThemeColor(root: HTMLElement, name: string, value: string) {\n root.style.setProperty(`--theme-${name}`, value);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0871"} +{"problem": "Create create a simple particle system for explosions using a typed array buffer. and include example usage.", "solution": "class ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0872"} +{"problem": "How would you organize Three.js objects into a hierarchical group with local transforms. with proper cleanup.", "solution": "function createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0873"} +{"problem": "Using the API, write code that create a Three.js lighting setup with ambient, directional, and point lights. that is accessible (a11y).", "solution": "function setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0874"} +{"problem": "Construct a function that create a Three.js sphere with custom segment counts and a wireframe overlay. with keyboard navigation support.", "solution": "// Variation 875\\nfunction createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0875"} +{"problem": "Develop create a DOM element with multiple classes and attributes in vanilla JavaScript. including error handling.", "solution": "function createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, entity] of Object.entries(attrs)) {\n el.setAttribute(key, entity);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0876"} +{"problem": "Write JavaScript that create a smooth Three.js rotation animation using delta time. with full docstrings.", "solution": "class RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0877"} +{"problem": "Create HTML/CSS for show a tool availability status dot with tooltip for the toolset panel. with JSDoc annotations.", "solution": "function ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0878"} +{"problem": "Design a Three.js create a responsive CSS grid layout with auto-fill and gap. using modern best practices.", "solution": "const style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0879"} +{"problem": "Write code to implement Three.js raycaster click picking with object metadata. that handles edge cases.", "solution": "// Variation 880\\nfunction setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].object;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0880"} +{"problem": "Implement apply a physically-based material with environment mapping to a Three.js object. with TypeScript types.", "solution": "function createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0881"} +{"problem": "Build build an image gallery grid that opens a shared lightbox on thumbnail click. that is performant.", "solution": "# Generated variation 882\\nlet currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-values:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0882"} +{"problem": "Create create a fixed-timestep game loop with accumulator pattern. with clear variable names.", "solution": "class GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0883"} +{"problem": "How would you display a horizontal memory usage bar with gradient warning zones. and include example usage.", "solution": "function MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0884"} +{"problem": "Using the API, write code that use IntersectionObserver to lazy-load images when they enter the viewport. with proper cleanup.", "solution": "// Variation 885\\nfunction setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[node-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.nodeset.src!;\n img.removeAttribute('node-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0885"} +{"problem": "Construct a function that write a debounce function that delays invoking a callback until after wait milliseconds. that is accessible (a11y).", "solution": "function debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0886"} +{"problem": "Develop render a circuit health badge showing approval-tier status with color-coded indicator. with keyboard navigation support.", "solution": "function CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0887"} +{"problem": "Write JavaScript that render a sovereignty badge displaying local-first status with tooltip. including error handling.", "solution": "function SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0888"} +{"problem": "Create HTML/CSS for implement event delegation for dynamic button clicks with proper type checking. with full docstrings.", "solution": "# Generated variation 889\\nfunction setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[data-action]')) return;\n\n const action = target.getAttribute('data-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0889"} +{"problem": "Design a Three.js create an approval gate component for dangerous commands with tiered risk colors. with JSDoc annotations.", "solution": "// Variation 890\\nfunction ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[data-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[data-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0890"} +{"problem": "Write code to implement OrbitControls camera with constrained polar angles and smooth damping. using modern best practices.", "solution": "function setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0891"} +{"problem": "Implement wrap localStorage with JSON serialization and TTL expiration. that handles edge cases.", "solution": "class StorageWithTTL {\n set(key: string, value: any, ttlMs = 0) {\n const item = { value, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { value, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return value as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0892"} +{"problem": "Build detect AABB (axis-aligned bounding box) collision between two rectangles. with TypeScript types.", "solution": "function aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0893"} +{"problem": "Create implement a responsive masonry image grid using CSS columns. that is performant.", "solution": "function createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0894"} +{"problem": "How would you capture keyboard input state with smooth handling for game controls. with clear variable names.", "solution": "// Variation 895\\nclass InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0895"} +{"problem": "Using the API, write code that validate a form submission with HTML5 constraints and custom checks. and include example usage.", "solution": "# Generated variation 896\\nfunction validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.value.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.value !== (form.elements.namedItem('confirm') as HTMLInputElement).value) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0896"} +{"problem": "Construct a function that set up a Three.js scene with a renderer, camera, and animation loop. with proper cleanup.", "solution": "function initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0897"} +{"problem": "Develop render a skill card with metadata, status indicator, and toggle switch. that is accessible (a11y).", "solution": "function SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0898"} +{"problem": "Write JavaScript that implement infinite scroll loading with IntersectionObserver and abort handling. with keyboard navigation support.", "solution": "async function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0899"} +{"problem": "Create HTML/CSS for implement a finite state machine for a game character with transitions. including error handling.", "solution": "// Variation 900\\ntype State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0900"} +{"problem": "Design a Three.js create and inject a dynamic stylesheet with CSS custom property overrides. with full docstrings.", "solution": "function injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0901"} +{"problem": "Write code to create a rounded-box Three.js geometry using RoundedBoxGeometry. with JSDoc annotations.", "solution": "function createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0902"} +{"problem": "Implement set up an HTML5 canvas with high-DPI scaling and clearing. using modern best practices.", "solution": "# Generated variation 903\\nfunction setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0903"} +{"problem": "Build animate a sprite sheet with frame-based playback and loop support. that handles edge cases.", "solution": "class SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0904"} +{"problem": "Create create a Three.js ShaderMaterial with uniform updates in the render loop. with TypeScript types.", "solution": "// Variation 905\\nfunction createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { value: 0 },\n uColor: { value: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0905"} +{"problem": "How would you load a Three.js texture asynchronously with proper error handling. that is performant.", "solution": "async function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0906"} +{"problem": "Using the API, write code that add depth fog to a Three.js scene for atmospheric perspective. with clear variable names.", "solution": "function addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0907"} +{"problem": "Construct a function that build a token budget display showing used/total with a visual progress bar. and include example usage.", "solution": "function TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0908"} +{"problem": "Develop generate a responsive viewport meta tag for mobile-first web apps. with proper cleanup.", "solution": "const viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0909"} +{"problem": "Write JavaScript that implement a throttle function ensuring a callback runs at most once per interval. that is accessible (a11y).", "solution": "// Variation 910\\nfunction throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0910"} +{"problem": "Create HTML/CSS for build a modal lightbox for full-screen image viewing with keyboard navigation. with keyboard navigation support.", "solution": "class Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0911"} +{"problem": "Design a Three.js set and read CSS custom properties (CSS variables) via JavaScript. including error handling.", "solution": "function setThemeColor(root: HTMLElement, name: string, value: string) {\n root.style.setProperty(`--theme-${name}`, value);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0912"} +{"problem": "Write code to create a simple particle system for explosions using a typed array buffer. with full docstrings.", "solution": "class ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0913"} +{"problem": "Implement organize Three.js objects into a hierarchical group with local transforms. with JSDoc annotations.", "solution": "function createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0914"} +{"problem": "Build create a Three.js lighting setup with ambient, directional, and point lights. using modern best practices.", "solution": "// Variation 915\\nfunction setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0915"} +{"problem": "Create create a Three.js sphere with custom segment counts and a wireframe overlay. that handles edge cases.", "solution": "function createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0916"} +{"problem": "How would you create a DOM element with multiple classes and attributes in vanilla JavaScript. with TypeScript types.", "solution": "# Generated variation 917\\nfunction createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, value] of Object.entries(attrs)) {\n el.setAttribute(key, value);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0917"} +{"problem": "Using the API, write code that create a smooth Three.js rotation animation using delta time. that is performant.", "solution": "class RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0918"} +{"problem": "Construct a function that show a tool availability status dot with tooltip for the toolset panel. with clear variable names.", "solution": "function ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0919"} +{"problem": "Develop create a responsive CSS grid layout with auto-fill and gap. and include example usage.", "solution": "// Variation 920\\nconst style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0920"} +{"problem": "Write JavaScript that implement Three.js raycaster click picking with object metadata. with proper cleanup.", "solution": "function setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].resultect;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0921"} +{"problem": "Create HTML/CSS for apply a physically-based material with environment mapping to a Three.js object. that is accessible (a11y).", "solution": "function createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0922"} +{"problem": "Design a Three.js build an image gallery grid that opens a shared lightbox on thumbnail click. with keyboard navigation support.", "solution": "let currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0923"} +{"problem": "Write code to create a fixed-timestep game loop with accumulator pattern. including error handling.", "solution": "# Generated variation 924\\nclass GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0924"} +{"problem": "Implement display a horizontal memory usage bar with gradient warning zones. with full docstrings.", "solution": "// Variation 925\\nfunction MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0925"} +{"problem": "Build use IntersectionObserver to lazy-load images when they enter the viewport. with JSDoc annotations.", "solution": "function setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[data-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.dataset.src!;\n img.removeAttribute('data-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0926"} +{"problem": "Create write a debounce function that delays invoking a callback until after wait milliseconds. using modern best practices.", "solution": "function debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0927"} +{"problem": "How would you render a circuit health badge showing approval-tier status with color-coded indicator. that handles edge cases.", "solution": "function CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0928"} +{"problem": "Using the API, write code that render a sovereignty badge displaying local-first status with tooltip. with TypeScript types.", "solution": "function SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0929"} +{"problem": "Construct a function that implement event delegation for dynamic button clicks with proper type checking. that is performant.", "solution": "// Variation 930\\nfunction setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[data-action]')) return;\n\n const action = target.getAttribute('data-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0930"} +{"problem": "Develop create an approval gate component for dangerous commands with tiered risk colors. with clear variable names.", "solution": "# Generated variation 931\\nfunction ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[data-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[data-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0931"} +{"problem": "Write JavaScript that implement OrbitControls camera with constrained polar angles and smooth damping. and include example usage.", "solution": "function setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0932"} +{"problem": "Create HTML/CSS for wrap localStorage with JSON serialization and TTL expiration. with proper cleanup.", "solution": "class StorageWithTTL {\n set(key: string, entry: any, ttlMs = 0) {\n const item = { entry, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { entry, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return entry as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0933"} +{"problem": "Design a Three.js detect AABB (axis-aligned bounding box) collision between two rectangles. that is accessible (a11y).", "solution": "function aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0934"} +{"problem": "Write code to implement a responsive masonry image grid using CSS columns. with keyboard navigation support.", "solution": "// Variation 935\\nfunction createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0935"} +{"problem": "Implement capture keyboard input state with smooth handling for game controls. including error handling.", "solution": "class InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0936"} +{"problem": "Build validate a form submission with HTML5 constraints and custom checks. with full docstrings.", "solution": "function validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.value.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.value !== (form.elements.namedItem('confirm') as HTMLInputElement).value) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0937"} +{"problem": "Create set up a Three.js scene with a renderer, camera, and animation loop. with JSDoc annotations.", "solution": "# Generated variation 938\\nfunction initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0938"} +{"problem": "How would you render a skill card with metadata, status indicator, and toggle switch. using modern best practices.", "solution": "function SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0939"} +{"problem": "Using the API, write code that implement infinite scroll loading with IntersectionObserver and abort handling. that handles edge cases.", "solution": "// Variation 940\\nasync function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0940"} +{"problem": "Construct a function that implement a finite state machine for a game character with transitions. with TypeScript types.", "solution": "type State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0941"} +{"problem": "Develop create and inject a dynamic stylesheet with CSS custom property overrides. that is performant.", "solution": "function injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0942"} +{"problem": "Write JavaScript that create a rounded-box Three.js geometry using RoundedBoxGeometry. with clear variable names.", "solution": "function createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0943"} +{"problem": "Create HTML/CSS for set up an HTML5 canvas with high-DPI scaling and clearing. and include example usage.", "solution": "function setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0944"} +{"problem": "Design a Three.js animate a sprite sheet with frame-based playback and loop support. with proper cleanup.", "solution": "// Variation 945\\nclass SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0945"} +{"problem": "Write code to create a Three.js ShaderMaterial with uniform updates in the render loop. that is accessible (a11y).", "solution": "function createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { value: 0 },\n uColor: { value: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0946"} +{"problem": "Implement load a Three.js texture asynchronously with proper error handling. with keyboard navigation support.", "solution": "async function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0947"} +{"problem": "Build add depth fog to a Three.js scene for atmospheric perspective. including error handling.", "solution": "function addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0948"} +{"problem": "Create build a token budget display showing used/total with a visual progress bar. with full docstrings.", "solution": "function TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0949"} +{"problem": "How would you generate a responsive viewport meta tag for mobile-first web apps. with JSDoc annotations.", "solution": "// Variation 950\\nconst viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0950"} +{"problem": "Using the API, write code that implement a throttle function ensuring a callback runs at most once per interval. using modern best practices.", "solution": "function throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0951"} +{"problem": "Construct a function that build a modal lightbox for full-screen image viewing with keyboard navigation. that handles edge cases.", "solution": "# Generated variation 952\\nclass Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0952"} +{"problem": "Develop set and read CSS custom properties (CSS variables) via JavaScript. with TypeScript types.", "solution": "function setThemeColor(root: HTMLElement, name: string, value: string) {\n root.style.setProperty(`--theme-${name}`, value);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0953"} +{"problem": "Write JavaScript that create a simple particle system for explosions using a typed array buffer. that is performant.", "solution": "class ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0954"} +{"problem": "Create HTML/CSS for organize Three.js objects into a hierarchical group with local transforms. with clear variable names.", "solution": "// Variation 955\\nfunction createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0955"} +{"problem": "Design a Three.js create a Three.js lighting setup with ambient, directional, and point lights. and include example usage.", "solution": "function setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0956"} +{"problem": "Write code to create a Three.js sphere with custom segment counts and a wireframe overlay. with proper cleanup.", "solution": "function createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0957"} +{"problem": "Implement create a DOM element with multiple classes and attributes in vanilla JavaScript. that is accessible (a11y).", "solution": "function createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, value] of Object.entries(attrs)) {\n el.setAttribute(key, value);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0958"} +{"problem": "Build create a smooth Three.js rotation animation using delta time. with keyboard navigation support.", "solution": "# Generated variation 959\\nclass RotatingObject {\n mesh: THREE.Mesh;\n speed: number;\n\n constructor(mesh: THREE.Mesh, rotationsPerSecond = 0.5) {\n this.mesh = mesh;\n this.speed = rotationsPerSecond * Math.PI * 2;\n }\n\n update(deltaSec: number) {\n this.mesh.rotation.y += this.speed * deltaSec;\n }\n}\n\n// In render loop:\nconst rotor = new RotatingObject(sphere, 0.25);\nlet last = performance.now();\nfunction animate(time: number) {\n const delta = (time - last) / 1000;\n last = time;\n rotor.update(delta);\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-animation", "id": "frontend-creative-0959"} +{"problem": "Create show a tool availability status dot with tooltip for the toolset panel. including error handling.", "solution": "// Variation 960\\nfunction ToolStatus({ name, ok }: { name: string; ok: boolean }) {\n const dot = document.createElement('span');\n dot.className = 'tool-status-dot';\n dot.style.backgroundColor = ok ? '#4caf50' : '#f44336';\n dot.title = `${name}: ${ok ? 'Available' : 'Disabled / missing API key'}`;\n return dot;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0960"} +{"problem": "How would you create a responsive CSS grid layout with auto-fill and gap. with full docstrings.", "solution": "const style = document.createElement('style');\nstyle.textContent = `\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n }\n .card {\n background: var(--card-bg);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n @media (max-width: 600px) {\n .card-grid { grid-template-columns: 1fr; }\n }\n`;\ndocument.head.appendChild(style);", "imports": "", "domain": "css-layout", "id": "frontend-creative-0961"} +{"problem": "Using the API, write code that implement Three.js raycaster click picking with object metadata. with JSDoc annotations.", "solution": "function setupRaycaster(camera: THREE.Camera, dom: HTMLElement) {\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n dom.addEventListener('click', (e) => {\n const rect = dom.getBoundingClientRect();\n mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;\n\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children, true);\n if (intersects.length > 0) {\n const hit = intersects[0].object;\n console.log('Clicked:', hit.userData.name || hit.uuid);\n }\n });\n\n return raycaster;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-interaction", "id": "frontend-creative-0962"} +{"problem": "Construct a function that apply a physically-based material with environment mapping to a Three.js object. using modern best practices.", "solution": "function createReflectiveMaterial(envMap: THREE.CubeTexture) {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n metalness: 1.0,\n roughness: 0.1,\n envMap: envMap,\n envMapIntensity: 1.0,\n });\n}\n\n// Usage\nconst material = createReflectiveMaterial(cubeTexture);\nconst mesh = new THREE.Mesh(geometry, material);", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0963"} +{"problem": "Develop build an image gallery grid that opens a shared lightbox on thumbnail click. that handles edge cases.", "solution": "let currentLightbox: HTMLDivElement | null = null;\n\nfunction buildGallery(images: { full: string; thumb: string; alt: string }[]) {\n const grid = document.createElement('div');\n grid.className = 'gallery-grid';\n grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem';\n\n images.forEach((img, idx) => {\n const thumb = document.createElement('img');\n thumb.src = img.thumb;\n thumb.alt = img.alt;\n thumb.style.cssText = 'cursor:pointer;width:100%;height:auto;object-fit:cover;border-radius:4px';\n thumb.addEventListener('click', () => openLightbox(idx));\n grid.appendChild(thumb);\n });\n\n return grid;\n}\n\nfunction openLightbox(index: number) {\n if (currentLightbox) currentLightbox.remove();\n currentLightbox = document.createElement('div');\n currentLightbox.className = 'lightbox';\n currentLightbox.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;z-index:10000;cursor:pointer';\n const img = document.createElement('img');\n img.src = images[index].full;\n img.style.maxWidth = '90vw';\n img.style.maxHeight = '90vh';\n currentLightbox.appendChild(img);\n currentLightbox.addEventListener('click', () => { currentLightbox?.remove(); currentLightbox = null; });\n document.body.appendChild(currentLightbox);\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0964"} +{"problem": "Write JavaScript that create a fixed-timestep game loop with accumulator pattern. with TypeScript types.", "solution": "// Variation 965\\nclass GameLoop {\n private lastTime = 0;\n private accumulator = 0;\n private readonly step = 1 / 60; // 60 Hz fixed step\n\n constructor(private readonly update: (dt: number) => void) {}\n\n start() {\n const frame = (time: number) => {\n const delta = (time - this.lastTime) / 1000;\n this.lastTime = time;\n this.accumulator += delta;\n\n while (this.accumulator >= this.step) {\n this.update(this.step);\n this.accumulator -= this.step;\n }\n\n requestAnimationFrame(frame);\n };\n requestAnimationFrame(frame);\n }\n}", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0965"} +{"problem": "Create HTML/CSS for display a horizontal memory usage bar with gradient warning zones. that is performant.", "solution": "# Generated variation 966\\nfunction MemoryBar({ used, total }: { used: number; total: number }) {\n const pct = (used / total) * 100;\n const bar = document.createElement('div');\n bar.className = 'memory-bar';\n let color = '#4caf50';\n if (pct > 80) color = '#ff9800';\n if (pct > 95) color = '#f44336';\n\n bar.innerHTML = `\n
\n
\n
\n ${(used/1024/1024).toFixed(1)} MB / ${(total/1024/1024).toFixed(1)} MB\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0966"} +{"problem": "Design a Three.js use IntersectionObserver to lazy-load images when they enter the viewport. with clear variable names.", "solution": "function setupLazyLoading(container: HTMLElement) {\n const images = container.querySelectorAll('img[data-src]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n img.src = img.dataset.src!;\n img.removeAttribute('data-src');\n observer.unobserve(img);\n }\n });\n }, { rootMargin: '50px' });\n\n images.forEach(img => observer.observe(img));\n}", "imports": "", "domain": "html-performance", "id": "frontend-creative-0967"} +{"problem": "Write code to write a debounce function that delays invoking a callback until after wait milliseconds. and include example usage.", "solution": "function debounce void>(\n fn: T,\n wait: number\n): (...args: Parameters) => void {\n let timeoutId: ReturnType | null = null;\n return (...args: Parameters) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn(...args), wait);\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0968"} +{"problem": "Implement render a circuit health badge showing approval-tier status with color-coded indicator. with proper cleanup.", "solution": "function CircuitBadge({ tier }: { tier: number }) {\n const colors = ['#f44336', '#ff9800', '#4caf50', '#2196f3', '#9c27b0'];\n const labels = ['BLOCKED', 'RESTRICTED', 'LIMITED', 'APPROVED', 'ELEVATED'];\n const color = colors[Math.min(tier, 4)];\n const label = labels[Math.min(tier, 4)];\n\n const badge = document.createElement('span');\n badge.className = 'circuit-badge';\n badge.style.backgroundColor = color;\n badge.textContent = label;\n badge.title = `Approval tier ${tier} — ${label.toLowerCase()} command set`;\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0969"} +{"problem": "Build render a sovereignty badge displaying local-first status with tooltip. that is accessible (a11y).", "solution": "// Variation 970\\nfunction SovereigntyBadge({ runningLocal }: { runningLocal: boolean }) {\n const badge = document.createElement('span');\n badge.className = 'sovereignty-badge';\n badge.innerHTML = runningLocal\n ? '\\ud83c\\uddf5\\ud83c\\uddf1\\u200d\\ud83c\\udfa8\\ufe0f Local'\n : '\\ud83d\\udd12 Cloud';\n badge.title = runningLocal\n ? 'This agent runs entirely on your machine'\n : 'This agent uses external inference';\n return badge;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0970"} +{"problem": "Create implement event delegation for dynamic button clicks with proper type checking. with keyboard navigation support.", "solution": "function setupEventDelegation(container: HTMLElement) {\n container.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n if (!target.matches('button[data-action]')) return;\n\n const action = target.getAttribute('data-action');\n switch (action) {\n case 'save':\n handleSave();\n break;\n case 'delete':\n handleDelete();\n break;\n default:\n console.warn('Unknown action:', action);\n }\n });\n}", "imports": "", "domain": "html-dom", "id": "frontend-creative-0971"} +{"problem": "How would you create an approval gate component for dangerous commands with tiered risk colors. including error handling.", "solution": "function ApprovalGate({ risk, onApprove, onDeny }: {\n risk: 'low' | 'medium' | 'high';\n onApprove: () => void;\n onDeny: () => void;\n}) {\n const colors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };\n const panel = document.createElement('div');\n panel.className = 'approval-gate';\n panel.style.borderColor = colors[risk];\n panel.innerHTML = `\n

This action is ${risk} risk. Continue?

\n \n \n `;\n panel.querySelector('[value-action=\"approve\"]')!.addEventListener('click', onApprove);\n panel.querySelector('[value-action=\"deny\"]')!.addEventListener('click', onDeny);\n return panel;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0972"} +{"problem": "Using the API, write code that implement OrbitControls camera with constrained polar angles and smooth damping. with full docstrings.", "solution": "# Generated variation 973\\nfunction setupOrbitControls(camera: THREE.PerspectiveCamera, domElement: HTMLElement) {\n const controls = new THREE.OrbitControls(camera, domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 2;\n controls.maxDistance = 20;\n controls.maxPolarAngle = Math.PI / 2;\n controls.minPolarAngle = Math.PI / 6;\n controls.enablePan = false;\n return controls;\n}", "imports": "import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';", "domain": "threejs-camera", "id": "frontend-creative-0973"} +{"problem": "Construct a function that wrap localStorage with JSON serialization and TTL expiration. with JSDoc annotations.", "solution": "class StorageWithTTL {\n set(key: string, value: any, ttlMs = 0) {\n const item = { value, expiry: ttlMs ? Date.now() + ttlMs : null };\n localStorage.setItem(key, JSON.stringify(item));\n }\n\n get(key: string): T | null {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { value, expiry } = JSON.parse(raw);\n if (expiry && Date.now() > expiry) {\n localStorage.removeItem(key);\n return null;\n }\n return value as T;\n }\n}", "imports": "", "domain": "html-storage", "id": "frontend-creative-0974"} +{"problem": "Develop detect AABB (axis-aligned bounding box) collision between two rectangles. using modern best practices.", "solution": "// Variation 975\\nfunction aabbCollision(\n a: { x: number; y: number; w: number; h: number },\n b: { x: number; y: number; w: number; h: number }\n): boolean {\n return a.x < b.x + b.w &&\n a.x + a.w > b.x &&\n a.y < b.y + b.h &&\n a.y + a.h > b.y;\n}\n\n// Usage for game entities\nif (aabbCollision(player, enemy)) {\n handlePlayerHit();\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0975"} +{"problem": "Write JavaScript that implement a responsive masonry image grid using CSS columns. that handles edge cases.", "solution": "function createMasonryGallery(images: { src: string; alt: string }[], columns = 3) {\n const container = document.createElement('div');\n container.className = 'masonry-gallery';\n container.style.columnCount = String(columns);\n container.style.gap = '1rem';\n\n images.forEach(img => {\n const figure = document.createElement('figure');\n figure.innerHTML = `\"${img.alt}\"`;\n container.appendChild(figure);\n });\n\n // Responsive breakpoints\n const mq = window.matchMedia('(max-width: 768px)');\n mq.addEventListener('change', (e) => {\n container.style.columnCount = e.matches ? '2' : String(columns);\n });\n\n return container;\n}", "imports": "", "domain": "gallery-layout", "id": "frontend-creative-0976"} +{"problem": "Create HTML/CSS for capture keyboard input state with smooth handling for game controls. with TypeScript types.", "solution": "class InputState {\n private keys = new Set();\n\n constructor() {\n window.addEventListener('keydown', (e) => this.keys.add(e.code));\n window.addEventListener('keyup', (e) => this.keys.delete(e.code));\n }\n\n isPressed(code: string): boolean {\n return this.keys.has(code);\n }\n\n hasAny(codes: string[]): boolean {\n return codes.some(c => this.keys.has(c));\n }\n}\n\n// In game loop:\nconst input = new InputState();\nif (input.isPressed('ArrowUp')) player.y -= speed * dt;", "imports": "", "domain": "game-input", "id": "frontend-creative-0977"} +{"problem": "Design a Three.js validate a form submission with HTML5 constraints and custom checks. that is performant.", "solution": "function validateForm(form: HTMLFormElement): { isValid: boolean; errors: string[] } {\n const errors: string[] = [];\n const email = form.elements.namedItem('email') as HTMLInputElement;\n const password = form.elements.namedItem('password') as HTMLInputElement;\n\n if (!email.validity.valid) {\n errors.push('Please enter a valid email address.');\n }\n if (password.obj.length < 8) {\n errors.push('Password must be at least 8 characters.');\n }\n if (password.obj !== (form.elements.namedItem('confirm') as HTMLInputElement).obj) {\n errors.push('Passwords do not match.');\n }\n\n return { isValid: errors.length === 0, errors };\n}", "imports": "", "domain": "html-forms", "id": "frontend-creative-0978"} +{"problem": "Write code to set up a Three.js scene with a renderer, camera, and animation loop. with clear variable names.", "solution": "function initThreeJS(container: HTMLElement) {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a0a0a);\n\n const camera = new THREE.PerspectiveCamera(\n 75,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.z = 5;\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n function animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n }\n animate();\n\n return { scene, camera, renderer };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0979"} +{"problem": "Implement render a skill card with metadata, status indicator, and toggle switch. and include example usage.", "solution": "// Variation 980\\nfunction SkillCard({ skill, enabled, onToggle }: {\n skill: { name: string; description: string; category: string };\n enabled: boolean;\n onToggle: (name: string) => void;\n}) {\n const card = document.createElement('article');\n card.className = 'skill-card';\n card.innerHTML = `\n
\n

${skill.name}

\n \n
\n

${skill.description}

\n
Category: ${skill.category}
\n `;\n card.querySelector('input')!.addEventListener('change', () => onToggle(skill.name));\n return card;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0980"} +{"problem": "Build implement infinite scroll loading with IntersectionObserver and abort handling. with proper cleanup.", "solution": "async function setupInfiniteScroll(container: HTMLElement, loadPage: (page: number) => Promise) {\n let page = 1;\n let loading = false;\n let done = false;\n\n const sentinel = document.createElement('div');\n sentinel.className = 'scroll-sentinel';\n container.appendChild(sentinel);\n\n const observer = new IntersectionObserver(async (entries) => {\n if (entries[0].isIntersecting && !loading && !done) {\n loading = true;\n try {\n await loadPage(++page);\n } catch (err) {\n console.error('Failed to load page:', err);\n done = true;\n }\n loading = false;\n }\n }, { rootMargin: '200px' });\n\n observer.observe(sentinel);\n}", "imports": "", "domain": "gallery-performance", "id": "frontend-creative-0981"} +{"problem": "Create implement a finite state machine for a game character with transitions. that is accessible (a11y).", "solution": "type State = 'idle' | 'walk' | 'run' | 'jump' | 'attack';\n\nclass StateMachine {\n private state: State = 'idle';\n private handlers: Record void>;\n\n constructor(handlers: Partial void>>) {\n this.handlers = handlers as Record void>;\n }\n\n transition(to: State) {\n console.log(`State: ${this.state} -> ${to}`);\n this.state = to;\n }\n\n dispatch(event: string) {\n const handler = this.handlers[this.state];\n if (handler) handler(event);\n }\n\n getState(): State {\n return this.state;\n }\n}\n\n// Usage\nconst sm = new StateMachine({\n idle: (e) => { if (e === 'move') sm.transition('walk'); },\n walk: (e) => { if (e === 'sprint') sm.transition('run'); if (e === 'jump') sm.transition('jump'); },\n run: (e) => { if (e === 'stop') sm.transition('idle'); },\n});", "imports": "", "domain": "game-architecture", "id": "frontend-creative-0982"} +{"problem": "How would you create and inject a dynamic stylesheet with CSS custom property overrides. with keyboard navigation support.", "solution": "function injectDynamicStyles(overrides: Record) {\n const style = document.createElement('style');\n let css = ':root {\\n';\n for (const [prop, val] of Object.entries(overrides)) {\n css += ` --${prop}: ${val};\\n`;\n }\n css += '}';\n style.textContent = css;\n document.head.appendChild(style);\n}", "imports": "", "domain": "css-variables", "id": "frontend-creative-0983"} +{"problem": "Using the API, write code that create a rounded-box Three.js geometry using RoundedBoxGeometry. including error handling.", "solution": "function createRoundedBox(width = 1, height = 1, depth = 1, segments = 2, radius = 0.1) {\n const geom = new THREE.RoundedBoxGeometry(width, height, depth, segments, radius);\n const mat = new THREE.MeshStandardMaterial({ color: 0x2ecc71 });\n return new THREE.Mesh(geom, mat);\n}", "imports": "import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';", "domain": "threejs-geometry", "id": "frontend-creative-0984"} +{"problem": "Construct a function that set up an HTML5 canvas with high-DPI scaling and clearing. with full docstrings.", "solution": "// Variation 985\\nfunction setupCanvas(canvas: HTMLCanvasElement, width = 800, height = 600) {\n const dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n const ctx = canvas.getContext('2d')!;\n ctx.scale(dpr, dpr);\n\n return {\n clear() { ctx.clearRect(0, 0, width, height); },\n ctx,\n width,\n height,\n };\n}", "imports": "", "domain": "game-rendering", "id": "frontend-creative-0985"} +{"problem": "Develop animate a sprite sheet with frame-based playback and loop support. with JSDoc annotations.", "solution": "class SpriteAnimator {\n private frame = 0;\n private lastTick = 0;\n\n constructor(\n private readonly image: HTMLImageElement,\n private readonly frameWidth: number,\n private readonly frameCount: number,\n private readonly fps: number = 12,\n private readonly loop: boolean = true,\n ) {}\n\n update(now: number) {\n const interval = 1000 / this.fps;\n if (now - this.lastTick >= interval) {\n this.lastTick = now;\n this.frame++;\n if (this.frame >= this.frameCount) {\n this.frame = this.loop ? 0 : this.frameCount - 1;\n }\n }\n }\n\n draw(ctx: CanvasRenderingContext2D, x: number, y: number) {\n ctx.drawImage(\n this.image,\n this.frame * this.frameWidth, 0,\n this.frameWidth, this.image.height,\n x, y,\n this.frameWidth, this.image.height\n );\n }\n}", "imports": "", "domain": "game-assets", "id": "frontend-creative-0986"} +{"problem": "Write JavaScript that create a Three.js ShaderMaterial with uniform updates in the render loop. using modern best practices.", "solution": "# Generated variation 987\\nfunction createGlowShader() {\n return new THREE.ShaderMaterial({\n uniforms: {\n uTime: { output: 0 },\n uColor: { output: new THREE.Color(0x00ffff) },\n },\n vertexShader: `\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform float uTime;\n uniform vec3 uColor;\n varying vec2 vUv;\n void main() {\n float pulse = 0.5 + 0.5 * sin(uTime * 2.0);\n gl_FragColor = vec4(uColor * pulse, 1.0);\n }\n `,\n transparent: true,\n });\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-materials", "id": "frontend-creative-0987"} +{"problem": "Create HTML/CSS for load a Three.js texture asynchronously with proper error handling. that handles edge cases.", "solution": "async function loadTexture(url: string): Promise {\n const loader = new THREE.TextureLoader();\n try {\n return await new Promise((resolve, reject) => {\n loader.load(url, resolve, undefined, reject);\n });\n } catch (err) {\n console.error('Texture load failed:', url, err);\n throw err;\n }\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-textures", "id": "frontend-creative-0988"} +{"problem": "Design a Three.js add depth fog to a Three.js scene for atmospheric perspective. with TypeScript types.", "solution": "function addFog(scene: THREE.Scene, color = 0x0a0a0a, near = 10, far = 50) {\n scene.fog = new THREE.Fog(color, near, far);\n scene.background = new THREE.Color(color);\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0989"} +{"problem": "Write code to build a token budget display showing used/total with a visual progress bar. that is performant.", "solution": "// Variation 990\\nfunction TokenBudgetDisplay({ used, total }: { used: number; total: number }) {\n const pct = Math.min((used / total) * 100, 100);\n const bar = document.createElement('div');\n bar.className = 'token-budget-bar';\n bar.innerHTML = `\n
\n
90 ? '#f44336' : '#4caf50'}\">
\n
\n ${used.toLocaleString()} / ${total.toLocaleString()} tokens\n `;\n return bar;\n}", "imports": "", "domain": "playground-ui", "id": "frontend-creative-0990"} +{"problem": "Implement generate a responsive viewport meta tag for mobile-first web apps. with clear variable names.", "solution": "const viewport = document.querySelector('meta[name=\"viewport\"]') ||\n document.createElement('meta');\nviewport.name = 'viewport';\nviewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover';\ndocument.head.appendChild(viewport);", "imports": "", "domain": "html-meta", "id": "frontend-creative-0991"} +{"problem": "Build implement a throttle function ensuring a callback runs at most once per interval. and include example usage.", "solution": "function throttle void>(\n fn: T,\n interval: number\n): (...args: Parameters) => void {\n let last = 0;\n return (...args: Parameters) => {\n const now = Date.now();\n if (now - last >= interval) {\n last = now;\n fn(...args);\n }\n };\n}", "imports": "", "domain": "html-utilities", "id": "frontend-creative-0992"} +{"problem": "Create build a modal lightbox for full-screen image viewing with keyboard navigation. with proper cleanup.", "solution": "class Lightbox {\n private overlay!: HTMLElement;\n private img!: HTMLImageElement;\n\n constructor() {\n this.overlay = document.createElement('div');\n this.overlay.className = 'lightbox-overlay';\n this.overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-entrys:center;justify-content:center;z-index:9999';\n this.img = document.createElement('img');\n this.overlay.appendChild(this.img);\n document.body.appendChild(this.overlay);\n\n this.overlay.addEventListener('click', () => this.close());\n document.addEventListener('keydown', (e) => e.key === 'Escape' && this.close());\n }\n\n open(src: string, alt: string) {\n this.img.src = src;\n this.img.alt = alt;\n this.overlay.style.display = 'flex';\n }\n\n close() {\n this.overlay.style.display = 'none';\n }\n}", "imports": "", "domain": "gallery-interaction", "id": "frontend-creative-0993"} +{"problem": "How would you set and read CSS custom properties (CSS variables) via JavaScript. that is accessible (a11y).", "solution": "# Generated variation 994\\nfunction setThemeColor(root: HTMLElement, name: string, value: string) {\n root.style.setProperty(`--theme-${name}`, value);\n}\n\nfunction getComputedColor(root: HTMLElement, name: string): string {\n return getComputedStyle(root).getPropertyValue(`--theme-${name}`).trim();\n}\n\n// Initialize theme\nsetThemeColor(document.documentElement, 'primary', '#4a90d9');\nsetThemeColor(document.documentElement, 'accent', '#ff6b6b');", "imports": "", "domain": "css-variables", "id": "frontend-creative-0994"} +{"problem": "Using the API, write code that create a simple particle system for explosions using a typed array buffer. with keyboard navigation support.", "solution": "// Variation 995\\nclass ParticleSystem {\n private particles = new Float32Array(1000 * 4); // x, y, vx, vy per particle\n private count = 0;\n private readonly max = 1000;\n\n emit(x: number, y: number, velocity = 200) {\n if (this.count >= this.max) return;\n const i = this.count * 4;\n this.particles[i] = x;\n this.particles[i + 1] = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * velocity;\n this.particles[i + 2] = Math.cos(angle) * speed;\n this.particles[i + 3] = Math.sin(angle) * speed;\n this.count++;\n }\n\n update(dt: number) {\n for (let i = 0; i < this.count * 4; i += 4) {\n this.particles[i] += this.particles[i + 2] * dt;\n this.particles[i + 1] += this.particles[i + 3] * dt;\n this.particles[i + 3] += 500 * dt; // gravity\n }\n }\n\n draw(ctx: CanvasRenderingContext2D) {\n ctx.fillStyle = '#ff6600';\n for (let i = 0; i < this.count * 4; i += 4) {\n ctx.fillRect(this.particles[i], this.particles[i + 1], 3, 3);\n }\n }\n}", "imports": "", "domain": "game-physics", "id": "frontend-creative-0995"} +{"problem": "Construct a function that organize Three.js objects into a hierarchical group with local transforms. including error handling.", "solution": "function createVehicleGroup() {\n const chassis = new THREE.Mesh(\n new THREE.BoxGeometry(2, 0.5, 4),\n new THREE.MeshStandardMaterial({ color: 0x333333 })\n );\n\n const wheels = new THREE.Group();\n const positions = [[-1, -0.3, -1.2], [1, -0.3, -1.2], [-1, -0.3, 1.2], [1, -0.3, 1.2]];\n positions.forEach(([x, y, z]) => {\n const wheel = new THREE.Mesh(\n new THREE.CylinderGeometry(0.3, 0.3, 0.2, 16),\n new THREE.MeshStandardMaterial({ color: 0x111111 })\n );\n wheel.rotation.z = Math.PI / 2;\n wheel.position.set(x, y, z);\n wheels.add(wheel);\n });\n\n const group = new THREE.Group();\n group.add(chassis);\n group.add(wheels);\n return group;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-scene", "id": "frontend-creative-0996"} +{"problem": "Develop create a Three.js lighting setup with ambient, directional, and point lights. with full docstrings.", "solution": "function setupLighting(scene: THREE.Scene) {\n const ambient = new THREE.AmbientLight(0x404040, 0.5);\n scene.add(ambient);\n\n const directional = new THREE.DirectionalLight(0xffffff, 1.0);\n directional.position.set(5, 10, 7);\n directional.castShadow = true;\n directional.shadow.mapSize.width = 2048;\n directional.shadow.mapSize.height = 2048;\n scene.add(directional);\n\n const point = new THREE.PointLight(0xff9000, 0.8, 20);\n point.position.set(-3, 2, 3);\n scene.add(point);\n\n return { ambient, directional, point };\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-lighting", "id": "frontend-creative-0997"} +{"problem": "Write JavaScript that create a Three.js sphere with custom segment counts and a wireframe overlay. with JSDoc annotations.", "solution": "function createSphereWithWireframe(radius = 1, segments = 32) {\n const sphereGeom = new THREE.SphereGeometry(radius, segments, segments);\n const sphereMat = new THREE.MeshStandardMaterial({\n color: 0x4a90d9,\n roughness: 0.3,\n metalness: 0.7,\n });\n const sphere = new THREE.Mesh(sphereGeom, sphereMat);\n\n const wireframe = new THREE.LineSegments(\n new THREE.WireframeGeometry(sphereGeom),\n new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true })\n );\n sphere.add(wireframe);\n\n return sphere;\n}", "imports": "import * as THREE from 'three';", "domain": "threejs-geometry", "id": "frontend-creative-0998"} +{"problem": "Create HTML/CSS for create a DOM element with multiple classes and attributes in vanilla JavaScript. using modern best practices.", "solution": "function createElement(tag: string, classes: string[] = [], attrs: Record = {}, children: Node[] = []) {\n const el = document.createElement(tag);\n el.classList.add(...classes);\n for (const [key, element] of Object.entries(attrs)) {\n el.setAttribute(key, element);\n }\n for (const child of children) {\n el.appendChild(child);\n }\n return el;\n}\n\n// Usage\nconst button = createElement('button', ['btn', 'btn-primary'], { 'aria-label': 'Submit' }, [\n document.createTextNode('Submit')\n]);", "imports": "", "domain": "html-dom", "id": "frontend-creative-0999"}