0x26cda2b3…87d9sent to0xb8952959…ccf4·#23,921,437·view on Etherscan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Tree of Life Genesis</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;font-family:system-ui,sans-serif;color:#fff;overflow:hidden}
#load{text-align:center}
#title{font-size:clamp(18px,5vw,28px);letter-spacing:.4em;text-transform:uppercase;margin-bottom:40px;font-weight:300;opacity:.9}
#bar-wrap{width:min(200px,60vw);height:2px;background:rgba(255,255,255,.1);margin-bottom:16px}
#bar{width:0;height:100%;background:#fff;transition:width .2s}
#status{font-size:11px;letter-spacing:.15em;text-transform:uppercase;opacity:.4}
#player{display:none;position:relative;width:min(90vw,90vh);max-width:640px;aspect-ratio:1/1}
#player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .15s}
#player video.active{opacity:1}
#phase{display:none;margin-top:20px;font-size:clamp(11px,2.5vw,14px);letter-spacing:.3em;text-transform:uppercase;opacity:.5;font-weight:300}
#end{display:none;text-align:center}
#end-title{font-size:clamp(16px,4vw,24px);letter-spacing:.3em;text-transform:uppercase;margin-bottom:32px;font-weight:300;opacity:.9}
.btn{display:inline-block;padding:10px 24px;margin:8px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.25);background:0 0;cursor:pointer;font-family:inherit;transition:all .2s}
.btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
</style>
</head>
<body>
<div id="load">
<div id="title">Tree of Life<br>Genesis</div>
<div id="bar-wrap"><div id="bar"></div></div>
<div id="status">Loading</div>
</div>
<div id="player"></div>
<div id="phase"></div>
<div id="end">
<div id="end-title">Tree of Life<br>Genesis</div>
<button class="btn" onclick="replay()">Watch Again</button>
<a class="btn" href="https://chainfeed.online/projects/view.html?slug=tree-of-life-genesis">View Collection</a>
</div>
<script>
var TX=[
'0xec59e5ccbc203e624e90d49429cc9e951b0d4516175d73f82c2ca432bc919d25',
'0x4ea72a06d060ccb4640427d8f710dddec905e3259fdf4df9cd14f8d2e584afa2',
'0xcd6cea15b1f3a144bfaa97b595b23a9702036f8f419e5db177d9ccf2a45bd6c6',
'0x27e8cb550fe22fd27c9b2c54a258034b32949ddd3e35b13ecb5a5a9062964e08',
'0x4989df3ca4cf0cf488352b441b2f3905656fb72b9ca305b7e69edfc5b503aad1',
'0x5f5c9504d3d35704b0641a2d067c2a2476cd04e1c8e471b9f70caf7da5139dc5',
'0xfba1bdb8c0203544c289f4f546ff9216098dc3b7aac082f6a9408fabb1469428',
'0xfd8c0abace7e607b59b5ed5cf571936c45c59b3dc924be671902c878c9202102',
'0x079e3cb470d857a2e339804f85e8e80e0527c016823f7580f69d9d50d81557ec',
'0x51978e7236cb63bca655aabb4987adb6bf558df403c15c38f19b777ef6ca1ca7',
'0x311fc18e0392aac88fb453b06de04018aa2d12aaf31df03d51a14add5cd613ac'
];
var NAMES=['I. Void','II. Spark','III. Seed','IV. Roots','V. Trunk','VI. Branches','VII. Leaves','VIII. Flowers','IX. Fruit','X. Seeds','XI. Universe'];
var load=document.getElementById('load'),bar=document.getElementById('bar'),status=document.getElementById('status'),player=document.getElementById('player'),phase=document.getElementById('phase'),end=document.getElementById('end');
var vids=[],cur=0,loaded=0;
function hex2str(h){for(var s='',i=0;i<h.length;i+=2)s+=String.fromCharCode(parseInt(h.substr(i,2),16));return s}
function toBlob(d){var p=d.split(','),m=p[0].match(/:(.*?);/)[1],b=atob(p[1]),a=new Uint8Array(b.length);for(var i=0;i<b.length;i++)a[i]=b.charCodeAt(i);return URL.createObjectURL(new Blob([a],{type:m}))}
function progress(){bar.style.width=(loaded/TX.length*100)+'%';status.textContent=loaded<TX.length?'Loading '+loaded+'/'+TX.length:'Ready'}
async function loadClip(tx,idx){
try{
var r=await fetch('https://eth.blockscout.com/api/v2/transactions/'+tx);
if(!r.ok)throw 0;
var d=await r.json();
if(!d.raw_input)throw 0;
var uri=hex2str(d.raw_input.slice(2));
if(uri.indexOf('data:')!==0)throw 0;
var v=document.createElement('video');
v.src=toBlob(uri);v.muted=true;v.playsInline=true;v.preload='auto';
vids[idx]=v;player.appendChild(v);
await new Promise(function(ok,no){v.oncanplaythrough=ok;v.onerror=no;v.load()});
}catch(e){}
loaded++;progress();
}
function play(){
load.style.display='none';player.style.display='block';phase.style.display='block';
function next(){
var v=vids[cur];if(!v){showEnd();return}
phase.textContent=NAMES[cur]||'';
vids.forEach(function(x){if(x)x.className=''});
v.className='active';v.currentTime=0;v.play();
v.onended=function(){cur++;next()};
}
next();
}
function showEnd(){player.style.display='none';phase.style.display='none';end.style.display='block'}
function replay(){end.style.display='none';cur=0;play()}
async function init(){
progress();
await Promise.all(TX.map(function(t,i){return loadClip(t,i)}));
var ok=vids.filter(function(v){return v});
if(!ok.length){status.textContent='Failed';return}
setTimeout(play,600);
}
init();
</script>
</body>
</html>