Elements

Live UI elements. Preview them, copy the code, install them with one line, or hand the page link to Claude.

401 live elements

V-Prism

Backgrounds @bhaskar Stars:0 Views:1

<!--
  Ported to plain HTML/CSS/JS for OwnlyPlans from ObsidianUI (https://github.com/Atharvsinh-codez/ObsidianUI)
  MIT License — Copyright (c) 2026 ObsidianUI
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
  documentation files (the "Software"), to deal in the Software without restriction, including without limitation
  the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
  permit persons to whom the Software is furnished to do so, subject to the following conditions:
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED.
-->
<div class="op-v-prism" role="img" aria-label="A glass prism splitting a beam of light into a spectrum. Move or drag to aim the beam.">
  <canvas class="op-vp-canvas"></canvas>
  <div class="op-vp-hint">move to aim the light</div>
</div>

<style>
/* Ported from ObsidianUI (MIT License, Copyright (c) 2026 ObsidianUI) */
.op-v-prism{position:relative;width:100%;height:520px;overflow:hidden;background:#000;touch-action:none;cursor:crosshair}
.op-vp-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.op-vp-hint{pointer-events:none;position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.22)}
</style>

<script>
(function(){
  // Same settings as the original dark preset; rendering is an original 2D take on the effect.
  var IOR=1.5,GLOW=2.5,BLOOM=.5;
  function snell(theta,ior){var s=Math.sin(theta)/ior;s=Math.max(-1,Math.min(1,s));return theta-Math.asin(s)}
  document.querySelectorAll('.op-v-prism').forEach(function(root){
    var cv=root.querySelector('canvas'),ctx=cv.getContext('2d'),W=0,H=0,dpr=1,reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
    var aim={x:-1,y:.35},cur={x:-1,y:.35},t0=performance.now(),idle=true;
    function resize(){dpr=Math.min(devicePixelRatio||1,2);W=root.clientWidth;H=root.clientHeight;cv.width=W*dpr;cv.height=H*dpr;ctx.setTransform(dpr,0,0,dpr,0,0)}
    resize();new ResizeObserver(resize).observe(root);
    function prism(){var cx=W/2,cy=H/2+(W<=640?H*.08:0),r=Math.min(W,H)*.2;return[0,1,2].map(function(i){var a=-Math.PI/2+i*2*Math.PI/3;return{x:cx+Math.cos(a)*r,y:cy+Math.sin(a)*r}}).concat([{x:cx,y:cy,r:r}])}
    function hit(o,d,p){var best=null;for(var i=0;i<3;i++){var a=p[i],b=p[(i+1)%3],ex=b.x-a.x,ey=b.y-a.y,den=d.x*ey-d.y*ex;if(Math.abs(den)<1e-6)continue;
      var t=((a.x-o.x)*ey-(a.y-o.y)*ex)/den,u=((a.x-o.x)*d.y-(a.y-o.y)*d.x)/den;if(t>0&&u>=0&&u<=1&&(!best||t<best.t)){var nx=ey,ny=-ex,l=Math.hypot(nx,ny);best={t:t,x:o.x+d.x*t,y:o.y+d.y*t,nx:nx/l,ny:ny/l}}}return best}
    function glow(x,y,r,a){var g=ctx.createRadialGradient(x,y,0,x,y,r);g.addColorStop(0,'rgba(255,255,255,'+a+')');g.addColorStop(.25,'rgba(255,248,235,'+a*.35+')');g.addColorStop(1,'rgba(255,255,255,0)');ctx.fillStyle=g;ctx.beginPath();ctx.arc(x,y,r,0,Math.PI*2);ctx.fill()}
    function frame(now){
      var t=(now-t0)/1000;
      if(idle&&!reduce){aim.x=-Math.cos(t*.25)*1;aim.y=.35+Math.sin(t*.4)*.25}
      var k=reduce?1:.12;cur.x+=(aim.x-cur.x)*k;cur.y+=(aim.y-cur.y)*k;
      ctx.globalCompositeOperation='source-over';ctx.fillStyle='#000';ctx.fillRect(0,0,W,H);
      var p=prism(),c=p[3],dl=Math.hypot(cur.x,cur.y)||1,d={x:-cur.x/dl,y:-cur.y/dl},o={x:c.x-d.x*Math.max(W,H),y:c.y-d.y*Math.max(W,H)};
      var h=hit(o,d,p);ctx.globalCompositeOperation='lighter';
      // Incident beam
      var end=h||{x:c.x+d.x*Math.max(W,H),y:c.y+d.y*Math.max(W,H)};
      ctx.lineCap='round';[[10,.04],[4,.12],[1.6,.9]].forEach(function(l){ctx.strokeStyle='rgba(235,235,235,'+l[1]+')';ctx.lineWidth=l[0];ctx.beginPath();ctx.moveTo(o.x,o.y);ctx.lineTo(end.x,end.y);ctx.stroke()});
      if(h){
        // Refraction: incidence angle against the inward normal, Snell deviation exaggerated x6 like the original.
        var nx=h.nx,ny=h.ny;if(nx*d.x+ny*d.y>0){nx=-nx;ny=-ny}
        var din=Math.atan2(d.y,d.x),nin=Math.atan2(-ny,-nx),th=Math.atan2(Math.sin(din-nin),Math.cos(din-nin));
        var dev=Math.max(-1.1,Math.min(1.1,snell(th,IOR)*6)),j=din-dev,exit={x:c.x,y:c.y},len=Math.hypot(W,H),spread=.34;
        for(var i=0;i<60;i++){var f=i/59,ang=j+(f-.5)*spread,hue=f*280,a=(.035+.02*Math.sin(t*2+f*6))*GLOW*.5;
          var g=ctx.createLinearGradient(exit.x,exit.y,exit.x+Math.cos(ang)*len*.7,exit.y+Math.sin(ang)*len*.7);g.addColorStop(0,'hsla('+hue+',100%,60%,'+a*1.6+')');g.addColorStop(.6,'hsla('+hue+',100%,55%,'+a+')');g.addColorStop(1,'hsla('+hue+',100%,50%,0)');
          ctx.fillStyle=g;ctx.beginPath();ctx.moveTo(exit.x,exit.y);ctx.lineTo(exit.x+Math.cos(ang-.006)*len,exit.y+Math.sin(ang-.006)*len);ctx.lineTo(exit.x+Math.cos(ang+.006)*len,exit.y+Math.sin(ang+.006)*len);ctx.closePath();ctx.fill()}
        ctx.strokeStyle='rgba(255,255,255,.35)';ctx.lineWidth=2;ctx.beginPath();ctx.moveTo(h.x,h.y);ctx.lineTo(exit.x,exit.y);ctx.stroke();
        glow(h.x,h.y,90*(1+BLOOM),.55);glow(h.x,h.y,22,.9);
        ctx.save();ctx.translate(h.x,h.y);ctx.rotate(din+Math.PI/2);var sg=ctx.createLinearGradient(-160,0,160,0);sg.addColorStop(0,'rgba(255,255,255,0)');sg.addColorStop(.5,'rgba(255,255,255,.12)');sg.addColorStop(1,'rgba(255,255,255,0)');ctx.fillStyle=sg;ctx.fillRect(-160,-1.5,320,3);ctx.restore();
      }
      // Glass crystal: solid tinted body, rounded corners, inner facet lines and a specular rim, standing in for the original's transmissive 3D prism.
      ctx.globalCompositeOperation='source-over';
      function tri(pts,rad){ctx.beginPath();for(var i=0;i<3;i++){var a=pts[i],b=pts[(i+1)%3],q=pts[(i+2)%3];var m1={x:a.x+(q.x-a.x)*.5,y:a.y+(q.y-a.y)*.5};if(i===0)ctx.moveTo((a.x+b.x)/2,(a.y+b.y)/2);ctx.arcTo(b.x,b.y,(b.x+q.x)/2,(b.y+q.y)/2,rad)}ctx.closePath()}
      var rr=c.r*.12;tri(p,rr);
      var fg=ctx.createLinearGradient(p[2].x,p[0].y,p[1].x,p[1].y);fg.addColorStop(0,'rgba(190,205,230,.20)');fg.addColorStop(.45,'rgba(120,130,150,.10)');fg.addColorStop(1,'rgba(200,210,235,.18)');ctx.fillStyle=fg;ctx.fill();
      ctx.save();tri(p,rr);ctx.clip();
      var cx=c.x,cy=c.y;ctx.strokeStyle='rgba(255,255,255,.10)';ctx.lineWidth=1;for(var i=0;i<3;i++){ctx.beginPath();ctx.moveTo(cx,cy);ctx.lineTo(p[i].x,p[i].y);ctx.stroke()}
      var sh=ctx.createLinearGradient(p[0].x,p[0].y,cx,cy+c.r);sh.addColorStop(0,'rgba(255,255,255,.22)');sh.addColorStop(.4,'rgba(255,255,255,0)');ctx.fillStyle=sh;ctx.fillRect(cx-c.r,p[0].y,c.r*2,c.r*2);
      ctx.restore();
      tri(p,rr);ctx.strokeStyle='rgba(255,255,255,.28)';ctx.lineWidth=1;ctx.stroke();
      ctx.globalCompositeOperation='lighter';tri(p,rr);ctx.strokeStyle='rgba(210,225,255,.07)';ctx.lineWidth=8;ctx.stroke();
      requestAnimationFrame(frame)}
    function aimAt(e){var r=root.getBoundingClientRect(),p=prism(),c=p[3];var x=e.clientX-r.left-c.x,y=e.clientY-r.top-c.y;if(Math.hypot(x,y)<4)return;aim.x=x;aim.y=y;idle=false}
    root.addEventListener('pointermove',aimAt);root.addEventListener('pointerdown',function(e){root.setPointerCapture(e.pointerId);aimAt(e)});
    root.addEventListener('pointerleave',function(){idle=true;t0=performance.now()-Math.acos(Math.max(-1,Math.min(1,-cur.x/(Math.hypot(cur.x,cur.y)||1))))/.25*1000});
    requestAnimationFrame(frame);
  });
})();
</script>

Art Gallery

Backgrounds @bhaskar Stars:0 Views:1

<!--
  Ported to plain HTML/CSS/JS for OwnlyPlans from ObsidianUI (https://github.com/Atharvsinh-codez/ObsidianUI)
  MIT License — Copyright (c) 2026 ObsidianUI
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
  documentation files (the "Software"), to deal in the Software without restriction, including without limitation
  the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
  permit persons to whom the Software is furnished to do so, subject to the following conditions:
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED.
-->
<div class="op-art-gallery" role="img" aria-label="Infinite art gallery grid. Drag to explore.">
  <canvas class="op-ag-canvas"></canvas>
  <div class="op-ag-hint">drag to explore</div>
</div>

<style>
/* Ported from ObsidianUI (MIT License, Copyright (c) 2026 ObsidianUI) */
.op-art-gallery{position:relative;width:100%;height:520px;overflow:hidden;background:#000;cursor:grab;touch-action:none}
.op-art-gallery:active{cursor:grabbing}
.op-ag-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.op-ag-hint{pointer-events:none;position:absolute;bottom:24px;left:50%;z-index:10;transform:translateX(-50%);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.2)}
</style>

<script>
(function(){
var CFG={cellSize:.75,zoomLevel:1.25,lerp:.075,border:[1,1,1,.15],bg:[0,0,0,1],text:'rgba(128,128,128,1)',hover:[1,1,1,0]};
var ITEMS=[["Low Tide",2024],["Paper Sun",2023],["Slow Dune",2024],["North Glow",2023],["Quiet Ridge",2024],["Amber Field",2022],["Soft Haze",2024],["Far Coast",2023],["Mint Hills",2024],["Dusk Line",2023],["Pale Moon",2022],["Rose Valley",2024],["Clear Cold",2024],["Ember Sky",2023],["Fog Bank",2023],["Twin Peaks",2024],["Green Hour",2023],["Still Lake",2024],["Heat Shimmer",2023],["Blue Ledge",2024],["Open Plain",2022],["Long Walk",2023],["High Pass",2024],["Night Frost",2022],["Warm Drift",2024]];
var PAL=[["#f6d6b8","#e08e6d","#7a4b6b","#2f2440"],["#cfe8ef","#7fb7c9","#2f6f8f","#16384d"],["#efe4cf","#c9a26b","#6e7f5b","#2e3b2c"],["#f3d9e4","#d38fb1","#8a5a9e","#3a2b55"],["#fde9c8","#f2b05e","#c4573b","#4a2230"],["#dde7f0","#9fb3c8","#5d7493","#222e42"],["#e6f0dc","#9cc28c","#4f8a63","#1f3b30"],["#f0e1d2","#c79a84","#8a6273","#33263a"]];
function rnd(seed){return function(){seed=(seed*16807)%2147483647;return (seed-1)/2147483646}}
// Draws one original landscape tile; no outside images are used.
function drawTile(ctx,x,y,s,i){var r=rnd(i*97+11),p=PAL[i%PAL.length],g=ctx.createLinearGradient(0,y,0,y+s);g.addColorStop(0,p[0]);g.addColorStop(1,p[1]);ctx.fillStyle=g;ctx.fillRect(x,y,s,s);
  ctx.globalAlpha=.85;ctx.fillStyle='#fff';ctx.beginPath();ctx.arc(x+s*(.2+r()*.6),y+s*(.18+r()*.14),s*(.08+r()*.06),0,Math.PI*2);ctx.fill();ctx.globalAlpha=1;
  [[.55,p[1],.08],[.68,p[2],.07],[.82,p[3],.05]].forEach(function(l){ctx.fillStyle=l[1];ctx.beginPath();ctx.moveTo(x,y+s);for(var k=0;k<=6;k++)ctx.lineTo(x+s*k/6,y+s*(l[0]+(r()*2-1)*l[2]));ctx.lineTo(x+s,y+s);ctx.closePath();ctx.fill()})}
function atlas(n,isText){var a=Math.ceil(Math.sqrt(n)),T=512,c=document.createElement('canvas');c.width=c.height=a*T;var ctx=c.getContext('2d');
  if(!isText){ctx.fillStyle='#000';ctx.fillRect(0,0,c.width,c.height)}
  for(var i=0;i<n;i++){var x=(i%a)*T,y=Math.floor(i/a)*T;
    if(isText){var t=document.createElement('canvas');t.width=2048;t.height=256;var tc=t.getContext('2d');tc.font='80px monospace';tc.fillStyle=CFG.text;tc.textBaseline='middle';tc.textAlign='left';tc.fillText(ITEMS[i][0].toUpperCase(),30,128);tc.textAlign='right';tc.fillText(String(ITEMS[i][1]),2018,128);ctx.drawImage(t,x,y,T,T)}
    else drawTile(ctx,x,y,T,i)}
  return c}
var VS='attribute vec2 p;varying vec2 vUv;void main(){vUv=p*.5+.5;gl_Position=vec4(p,0.,1.);}';
var FS='precision highp float;uniform vec2 uOffset;uniform vec2 uResolution;uniform vec4 uBorderColor;uniform vec4 uHoverColor;uniform vec4 uBackgroundColor;uniform vec2 uMousePos;uniform float uZoom;uniform float uCellSize;uniform float uTextureCount;uniform sampler2D uImageAtlas;uniform sampler2D uTextAtlas;varying vec2 vUv;'+
'void main(){vec2 screenUV=(vUv-.5)*2.;float radius=length(screenUV);float distortion=1.-.08*radius*radius;vec2 distortedUV=screenUV*distortion;vec2 aspectRatio=vec2(uResolution.x/uResolution.y,1.);vec2 worldCoord=distortedUV*aspectRatio;worldCoord*=uZoom;worldCoord+=uOffset;vec2 cellPos=worldCoord/uCellSize;vec2 cellId=floor(cellPos);vec2 cellUV=fract(cellPos);'+
'vec2 m=(uMousePos/uResolution)*2.-1.;m.y=-m.y;float mr=length(m);vec2 mw=m*(1.-.08*mr*mr)*aspectRatio*uZoom+uOffset;vec2 mcell=floor(mw/uCellSize);float cd=length((cellId+.5)-(mcell+.5));float hi=1.-smoothstep(.4,.7,cd);bool hov=hi>0.&&uMousePos.x>=0.;vec3 bg=uBackgroundColor.rgb;if(hov)bg=mix(bg,uHoverColor.rgb,hi*uHoverColor.a);'+
'float lw=.005;float gm=smoothstep(0.,lw,cellUV.x)*smoothstep(0.,lw,1.-cellUV.x)*smoothstep(0.,lw,cellUV.y)*smoothstep(0.,lw,1.-cellUV.y);float is=.6;float ib=(1.-is)*.5;vec2 iuv=(cellUV-ib)/is;float es=.01;vec2 imk=smoothstep(-es,es,iuv)*smoothstep(-es,es,1.-iuv);float ia=imk.x*imk.y;bool inI=iuv.x>=0.&&iuv.x<=1.&&iuv.y>=0.&&iuv.y<=1.;'+
'float th=.08;float ty=.88;bool inT=cellUV.x>=.05&&cellUV.x<=.95&&cellUV.y>=ty&&cellUV.y<=(ty+th);float ti=mod(cellId.x+cellId.y*3.,uTextureCount);vec3 color=bg;float as=ceil(sqrt(uTextureCount));vec2 ap=vec2(mod(ti,as),floor(ti/as));'+
'if(inI&&ia>0.){vec2 auv=(ap+iuv)/as;auv.y=1.-auv.y;color=mix(color,texture2D(uImageAtlas,auv).rgb,ia);}'+
'if(inT){vec2 tcd=vec2((cellUV.x-.05)/.9,(cellUV.y-ty)/th);tcd.y=1.-tcd.y;vec4 tc=texture2D(uTextAtlas,(ap+tcd)/as);color=mix(bg,tc.rgb,tc.a);}'+
'color=mix(color,uBorderColor.rgb,(1.-gm)*uBorderColor.a);float fade=1.-smoothstep(1.2,1.8,radius);gl_FragColor=vec4(color*fade,1.);}';
document.querySelectorAll('.op-art-gallery').forEach(function(root){
  var cv=root.querySelector('canvas'),gl=cv.getContext('webgl',{antialias:true});if(!gl)return;
  function sh(t,s){var o=gl.createShader(t);gl.shaderSource(o,s);gl.compileShader(o);return o}
  var pr=gl.createProgram();gl.attachShader(pr,sh(gl.VERTEX_SHADER,VS));gl.attachShader(pr,sh(gl.FRAGMENT_SHADER,FS));gl.linkProgram(pr);gl.useProgram(pr);
  var b=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,b);gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,1,1]),gl.STATIC_DRAW);var loc=gl.getAttribLocation(pr,'p');gl.enableVertexAttribArray(loc);gl.vertexAttribPointer(loc,2,gl.FLOAT,false,0,0);
  function U(n){return gl.getUniformLocation(pr,n)}
  // Atlases are drawn top-down in canvas space; the shader expects the flipY=false layout the original used.
  function tex(unit,canvas,nearest){var t=gl.createTexture();gl.activeTexture(gl.TEXTURE0+unit);gl.bindTexture(gl.TEXTURE_2D,t);gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,false);gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,canvas);
    var f=nearest?gl.NEAREST:gl.LINEAR;gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,f);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,f);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE)}
  var n=ITEMS.length;tex(0,atlas(n,false),false);tex(1,atlas(n,true),false);
  gl.uniform1i(U('uImageAtlas'),0);gl.uniform1i(U('uTextAtlas'),1);gl.uniform1f(U('uCellSize'),CFG.cellSize);gl.uniform1f(U('uTextureCount'),n);
  gl.uniform4fv(U('uBorderColor'),CFG.border);gl.uniform4fv(U('uHoverColor'),CFG.hover);gl.uniform4fv(U('uBackgroundColor'),CFG.bg);gl.uniform2f(U('uMousePos'),-1,-1);
  var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches,lerp=reduce?1:CFG.lerp,dragZoom=reduce?1:CFG.zoomLevel;
  var s={drag:false,px:0,py:0,ox:0,oy:0,tx:0,ty:0,z:1,tz:1};
  function resize(){var dpr=Math.min(devicePixelRatio||1,2),w=root.clientWidth,h=root.clientHeight;cv.width=w*dpr;cv.height=h*dpr;gl.viewport(0,0,cv.width,cv.height);gl.uniform2f(U('uResolution'),w,h)}
  resize();new ResizeObserver(resize).observe(root);
  (function frame(){s.ox+=(s.tx-s.ox)*lerp;s.oy+=(s.ty-s.oy)*lerp;s.z+=(s.tz-s.z)*lerp;gl.uniform2f(U('uOffset'),s.ox,s.oy);gl.uniform1f(U('uZoom'),s.z);gl.drawArrays(gl.TRIANGLE_STRIP,0,4);requestAnimationFrame(frame)})();
  root.addEventListener('pointerdown',function(e){e.preventDefault();root.setPointerCapture(e.pointerId);s.drag=true;s.px=e.clientX;s.py=e.clientY});
  root.addEventListener('pointermove',function(e){var r=cv.getBoundingClientRect();gl.uniform2f(U('uMousePos'),e.clientX-r.left,e.clientY-r.top);if(!s.drag)return;var dx=e.clientX-s.px,dy=e.clientY-s.py;if((Math.abs(dx)>2||Math.abs(dy)>2)&&s.tz===1)s.tz=dragZoom;s.tx-=dx*.003;s.ty+=dy*.003;s.px=e.clientX;s.py=e.clientY});
  function end(){s.drag=false;s.tz=1}
  root.addEventListener('pointerup',end);root.addEventListener('pointercancel',end);
  root.addEventListener('pointerleave',function(){gl.uniform2f(U('uMousePos'),-1,-1);end()});
});
})();
</script>

Flowing Gradient Background

Backgrounds @bhaskar Stars:0 Views:3

<div class="fb"><div class="cv"><canvas width="160" height="90"></canvas></div><div class="ct"><div class="pl"></div><label>Speed <input type="range" min="1" max="30" value="10"></label></div></div>

<style>
.fb{width:100%;height:100%;min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.cv{width:340px;height:190px;border-radius:16px;overflow:hidden}.cv canvas{width:100%;height:100%;display:block;filter:blur(6px) saturate(1.2);transform:scale(1.1)}.ct{display:flex;align-items:center;gap:16px;font-size:11px;color:#999}.pl{display:flex;gap:6px}.pl i{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .2s}.pl i.on{border-color:#fff;transform:scale(1.15)}.ct input{vertical-align:middle;accent-color:#0a84ff;width:90px}
</style>

<script>
(function(){var R=document.querySelector(".fb"),cv=R.querySelector("canvas"),x=cv.getContext("2d"),sp=R.querySelector("input"),pl=R.querySelector(".pl"),P=[["#a855c8","#f0529c","#dcdcfb","#4a39b5"],["#0ea5e9","#22d3ee","#e0f2fe","#1e3a8a"],["#f97316","#fbbf24","#fff7ed","#9a3412"],["#10b981","#a3e635","#ecfccb","#065f46"]],cur=0,t=0;P.forEach(function(p,i){var d=document.createElement("i");d.style.background="linear-gradient(135deg,"+p[0]+","+p[1]+")";d.onclick=function(){cur=i;mk()};pl.appendChild(d)});function mk(){[].forEach.call(pl.children,function(e,i){e.classList.toggle("on",i===cur)})}function frame(){t+=sp.value/1000;var p=P[cur],w=160,h=90;x.globalCompositeOperation="source-over";x.fillStyle=p[0];x.fillRect(0,0,w,h);var B=[[.3,.3,p[1],70],[.7,.7,p[2],80],[.8,.2,p[1],55],[.2,.8,p[3],60]];B.forEach(function(b,i){var cx=(b[0]+Math.sin(t*(1+i*.3)+i)*.28)*w,cy=(b[1]+Math.cos(t*(.8+i*.25)+i*2)*.28)*h,g=x.createRadialGradient(cx,cy,0,cx,cy,b[3]);g.addColorStop(0,b[2]);g.addColorStop(1,"rgba(0,0,0,0)");x.fillStyle=g;x.fillRect(0,0,w,h)});requestAnimationFrame(frame)}mk();frame()})();
</script>

Sponsor Find the best prompts on the Internet Learn more