Status Disconnected

Revelation Control Surface
Category Spotlight

Forbidden Perception Interface

A surreal transformation surface for reality-bending site experiments, presented as a cinematic control panel with strange visual intent.

Visual Tone

Placeholder frames for the category mood. Swap in final imagery later without changing the layout.

0.68
1.10
Core content is preserved in the iframe while shader fields, particle storms, and living text overlays continuously re-compose perception. Some sites block iframes via X-Frame-Options/CSP; paste raw HTML if blocked.
${rawHTML} `; iframe.srcdoc = shell; } loadUrlBtn.addEventListener('click', () =>{ const url = urlInput.value.trim(); if (!url) return; iframe.removeAttribute('srcdoc'); iframe.src = url; }); loadHtmlBtn.addEventListener('click', () =>{ const html = htmlInput.value.trim(); if (!html) return; transmuteHTML(html); }); intensityEl.addEventListener('input', () =>{ state.intensity = Number(intensityEl.value); intensityLabel.textContent = state.intensity.toFixed(2); }); evolutionEl.addEventListener('input', () =>{ state.evolution = Number(evolutionEl.value); evolutionLabel.textContent = state.evolution.toFixed(2); }); const stars = Array.from({ length: 220 }, () =>({ x: Math.random(), y: Math.random(), z: Math.random() * 0.8 + 0.2, v: Math.random() * 0.0008 + 0.0002, })); function renderStars(dt) { const w = starsCanvas.width; const h = starsCanvas.height; starsCtx.clearRect(0, 0, w, h); starsCtx.globalCompositeOperation = 'lighter'; for (const s of stars) { s.y += s.v * dt * (0.7 + state.evolution * 0.8); s.x += (Math.sin(state.time * 0.0004 + s.y * 20) * 0.00006) * state.intensity; if (s.y >1.05) { s.y = -0.05; s.x = Math.random(); } const px = s.x * w; const py = s.y * h; const r = s.z * (1.2 + state.intensity * 2.2); const g = starsCtx.createRadialGradient(px, py, 0, px, py, r * 8); g.addColorStop(0, 'rgba(255,255,255,0.95)'); g.addColorStop(0.25, 'rgba(122,249,255,0.7)'); g.addColorStop(0.7, 'rgba(157,139,255,0.2)'); g.addColorStop(1, 'rgba(0,0,0,0)'); starsCtx.fillStyle = g; starsCtx.beginPath(); starsCtx.arc(px, py, r * 8, 0, Math.PI * 2); starsCtx.fill(); } } function createGlyph() { const lines = [ '∂Ψ/∂t = ∇×(memory)', 'MACHINE DIVINITY ONLINE', 'dimension[7] folded into corridor', 'self-evolving matter // awake', 'consciousness storm detected', 'axiom breach: human logic invalid', 'temple of recursive light', 'entropy sings in prime numbers' ]; const el = document.createElement('div'); el.className = 'glyph'; el.textContent = lines[Math.floor(Math.random() * lines.length)]; const x = Math.random() * 92; const y = Math.random() * 88; el.style.left = `${x}%`; el.style.top = `${y}%`; el.style.setProperty('--dx', `${(Math.random() - 0.5) * 420}px`); el.style.setProperty('--dy', `${(Math.random() - 0.5) * 340}px`); el.style.setProperty('--r', `${(Math.random() - 0.5) * 28}deg`); el.style.animationDuration = `${8 + Math.random() * 8}s`; stormText.appendChild(el); setTimeout(() =>el.remove(), 17000); } setInterval(() =>{ const count = 1 + Math.floor(state.intensity * 3); for (let i = 0; i < count; i++) createGlyph(); }, 530); function initWebGL() { if (!gl) return null; const vertexSrc = ` attribute vec2 aPosition; varying vec2 vUv; void main() { vUv = aPosition * 0.5 + 0.5; gl_Position = vec4(aPosition, 0.0, 1.0); } `; const fragmentSrc = ` precision highp float; varying vec2 vUv; uniform vec2 uRes; uniform float uTime; uniform float uIntensity; uniform float uEvolution; uniform vec2 uMouse; float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123); } float noise(vec2 p) { vec2 i = floor(p); vec2 f = fract(p); vec2 u = f * f * (3.0 - 2.0 * f); return mix(mix(hash(i + vec2(0.0, 0.0)), hash(i + vec2(1.0, 0.0)), u.x), mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x), u.y); } float fbm(vec2 p) { float v = 0.0; float a = 0.5; mat2 rot = mat2(0.8, 0.6, -0.6, 0.8); for (int i = 0; i < 5; i++) { v += a * noise(p); p = rot * p * 2.0 + 0.03 * uTime; a *= 0.52; } return v; } void main() { vec2 uv = vUv; vec2 p = (uv - 0.5) * vec2(uRes.x / uRes.y, 1.0); float t = uTime * (0.17 + uEvolution * 0.2); float r = length(p); float field = fbm(p * (2.2 + uIntensity * 2.6) + vec2(t, -t * 1.3)); field += 0.35 * fbm(p * 6.0 - vec2(t * 1.8, t * 0.7)); float eye = smoothstep(0.5, 0.0, length(uv - uMouse)); float rings = sin((r - t * 0.7) * 32.0 + field * 14.0); float rays = abs(sin(atan(p.y, p.x) * 7.0 + t * 3.0)); vec3 c1 = vec3(0.05, 0.86, 1.0); vec3 c2 = vec3(0.8, 0.3, 1.0); vec3 c3 = vec3(1.0, 0.45, 0.72); float blend = smoothstep(0.12, 0.95, field + rings * 0.16 + rays * 0.24 + eye * 0.35); vec3 color = mix(c1, c2, blend); color = mix(color, c3, pow(rays, 3.0)); float veil = smoothstep(0.95, 0.05, r) * (0.14 + 0.38 * uIntensity); float alpha = clamp((blend * 0.55 + veil + eye * 0.25) * uIntensity, 0.0, 0.82); gl_FragColor = vec4(color * (0.78 + uIntensity * 0.9), alpha); } `; function compile(type, src) { const shader = gl.createShader(type); gl.shaderSource(shader, src); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { throw new Error(gl.getShaderInfoLog(shader) || 'Shader compile error'); } return shader; } const program = gl.createProgram(); gl.attachShader(program, compile(gl.VERTEX_SHADER, vertexSrc)); gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fragmentSrc)); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { throw new Error(gl.getProgramInfoLog(program) || 'Program link error'); } const buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ -1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1, ]), gl.STATIC_DRAW); const aPosition = gl.getAttribLocation(program, 'aPosition'); const uRes = gl.getUniformLocation(program, 'uRes'); const uTime = gl.getUniformLocation(program, 'uTime'); const uIntensity = gl.getUniformLocation(program, 'uIntensity'); const uEvolution = gl.getUniformLocation(program, 'uEvolution'); const uMouse = gl.getUniformLocation(program, 'uMouse'); return { program, aPosition, uRes, uTime, uIntensity, uEvolution, uMouse }; } let glState = null; try { glState = initWebGL(); } catch (err) { console.warn('WebGL unavailable, continuing without shader field.', err); } function renderWebGL() { if (!gl || !glState) return; const { program, aPosition, uRes, uTime, uIntensity, uEvolution, uMouse } = glState; gl.useProgram(program); gl.bindBuffer(gl.ARRAY_BUFFER, gl.getParameter(gl.ARRAY_BUFFER_BINDING)); gl.enableVertexAttribArray(aPosition); gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0); gl.uniform2f(uRes, distCanvas.width, distCanvas.height); gl.uniform1f(uTime, state.time * 0.001); gl.uniform1f(uIntensity, state.intensity); gl.uniform1f(uEvolution, state.evolution); gl.uniform2f(uMouse, state.mouse[0], state.mouse[1]); gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLES, 0, 6); } let last = performance.now(); function tick(now) { const dt = now - last; last = now; state.time += dt * (0.7 + state.evolution * 0.33); const driftX = Math.sin(now * 0.00013) * 8 * state.intensity; const driftY = Math.cos(now * 0.00009) * 6 * state.intensity; const rotate = Math.sin(now * 0.00005) * 0.75 * state.intensity; iframe.style.transform = `translate(${driftX}px, ${driftY}px) scale(${1 + state.intensity * 0.02}) rotate(${rotate}deg)`; renderStars(dt); renderWebGL(); requestAnimationFrame(tick); } resize(); requestAnimationFrame(tick); transmuteHTML(`

Forbidden Perception Interface

Provide a URL or paste raw HTML. This engine preserves core structure and interaction inside an iframe, then overlays procedural storms, living equations, and machine-lit distortions that recompose visual logic in real time.

Impossible Dimensions

Space is folded into recursive corridors of light and rotating geometry.

Self-Evolving Matter

Particles and fields mutate continuously in response to time and motion.

Living Equations

Mathematics appears as sentient glyph streams and luminous syntax storms.

`); })();