Liveloop

An interactive timeline for social media. Every post is a tiny app you can play, save, and remix.

Product

  • Feed
  • Create
  • Claude Code plugin
  • Blog

Legal

  • Privacy Policy
  • Terms of Service
  • Cookie Policy
  • DMCA

Project

  • Templates
© 2026 Liveloop. All rights reserved.
LiveloopVersion history

v1Current

@joaobarrosfranca · 6/7/2026, 12:14:48 AM

Initial version — all lines are new.

+<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style>html,body{height:100%;margin:0;overflow:hidden;background:radial-gradient(circle at 50% 38%,#1a1030,#05050a)}canvas{display:block}</style></head><body>
+<script type="module">
+import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js";
+let w=innerWidth,h=innerHeight;
+const scene=new THREE.Scene();
+const cam=new THREE.PerspectiveCamera(55,w/h,0.1,100);cam.position.z=3.2;
+const ren=new THREE.WebGLRenderer({antialias:true,alpha:true});ren.setSize(w,h);ren.setPixelRatio(Math.min(devicePixelRatio,2));document.body.appendChild(ren.domElement);
+const geo=new THREE.BoxGeometry(1.4,1.4,1.4);
+const cube=new THREE.Mesh(geo,new THREE.MeshStandardMaterial({color:0x8b5cf6,metalness:0.4,roughness:0.25}));scene.add(cube);
+cube.add(new THREE.LineSegments(new THREE.EdgesGeometry(geo),new THREE.LineBasicMaterial({color:0xffa657})));
+scene.add(new THREE.AmbientLight(0xffffff,0.5));
+const dl=new THREE.DirectionalLight(0xffffff,1.1);dl.position.set(2,3,4);scene.add(dl);
+addEventListener("resize",()=>{w=innerWidth;h=innerHeight;cam.aspect=w/h;cam.updateProjectionMatrix();ren.setSize(w,h);});
+(function loop(t){requestAnimationFrame(loop);cube.rotation.x=t*0.0006;cube.rotation.y=t*0.0009;ren.render(scene,cam);})(0);
+</script></body></html>

v1Current

@joaobarrosfranca · 6/7/2026, 12:14:48 AM

Initial version — all lines are new.

+<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style>html,body{height:100%;margin:0;overflow:hidden;background:radial-gradient(circle at 50% 38%,#1a1030,#05050a)}canvas{display:block}</style></head><body>
+<script type="module">
+import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js";
+let w=innerWidth,h=innerHeight;
+const scene=new THREE.Scene();
+const cam=new THREE.PerspectiveCamera(55,w/h,0.1,100);cam.position.z=3.2;
+const ren=new THREE.WebGLRenderer({antialias:true,alpha:true});ren.setSize(w,h);ren.setPixelRatio(Math.min(devicePixelRatio,2));document.body.appendChild(ren.domElement);
+const geo=new THREE.BoxGeometry(1.4,1.4,1.4);
+const cube=new THREE.Mesh(geo,new THREE.MeshStandardMaterial({color:0x8b5cf6,metalness:0.4,roughness:0.25}));scene.add(cube);
+cube.add(new THREE.LineSegments(new THREE.EdgesGeometry(geo),new THREE.LineBasicMaterial({color:0xffa657})));
+scene.add(new THREE.AmbientLight(0xffffff,0.5));
+const dl=new THREE.DirectionalLight(0xffffff,1.1);dl.position.set(2,3,4);scene.add(dl);
+addEventListener("resize",()=>{w=innerWidth;h=innerHeight;cam.aspect=w/h;cam.updateProjectionMatrix();ren.setSize(w,h);});
+(function loop(t){requestAnimationFrame(loop);cube.rotation.x=t*0.0006;cube.rotation.y=t*0.0009;ren.render(scene,cam);})(0);
+</script></body></html>
← Version history