@litfamily/litgrok 1.0.4 → 1.0.6

package/.grok/skills/readme-studio/templates/hyperframes/index.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en" data-fps="60">
+<head><meta charset="utf-8"><title>README cover composition</title>
+<style>
+*{box-sizing:border-box}
+html,body{margin:0;background:#112329}
+#cover{position:relative;width:1600px;height:800px;overflow:hidden;background:#112329;color:#f7f5ef}
+#background-far{position:absolute;inset:-30px;width:1660px;height:860px;object-fit:cover;filter:blur(var(--blur,16px));animation:drift 5s ease-in-out both}
+#background-mid{position:absolute;left:18%;top:7%;width:84%;height:69%;object-fit:cover;filter:blur(var(--mid-blur,5px));opacity:.35;animation:mid-drift 5s ease-in-out both}
+#field{position:absolute;inset:0;background:linear-gradient(105deg,rgba(17,35,41,.98) 8%,rgba(17,35,41,.93) 54%,rgba(17,35,41,.55))}
+#foreground-plane{position:absolute;left:-30px;bottom:0;width:calc(100% + 60px);height:32%;object-fit:cover;object-position:center bottom;filter:none;opacity:.34;animation:foreground-drift 5s ease-in-out both}
+#glow{position:absolute;inset:0;background:radial-gradient(ellipse at 86% 20%,#ffa76d,transparent 60%);opacity:.18;animation:light 5s ease-in-out both}
+#rim-light{position:absolute;inset:0;background:linear-gradient(112deg,transparent 42%,rgba(255,206,155,.12) 48%,rgba(255,206,155,.34) 50%,rgba(255,206,155,.12) 52%,transparent 58%);opacity:.42;mix-blend-mode:screen;animation:rim 5s ease-in-out both}
+#grain{position:absolute;inset:0;opacity:.035;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:13px 17px}
+#rules{position:absolute;inset:72px;border-block:1px solid #f7f5ef66}
+#label{position:absolute;left:78px;top:120px;width:430px}
+#type{position:absolute;left:72px;top:280px;width:970px;animation:entry 5s cubic-bezier(.3,0,.3,1) both}
+#title{width:970px}
+#subtitle{width:680px;margin-top:24px}
+#pixels{position:absolute;right:72px;bottom:110px;width:320px;height:320px;animation:float 5s ease-in-out both;image-rendering:pixelated}
+@keyframes drift{0%,100%{transform:translateY(0) scale(1.03)}50%{transform:translateY(6px) scale(1.03)}}
+@keyframes mid-drift{0%,100%{transform:translateY(0) scale(1.02)}50%{transform:translateY(3px) scale(1.02)}}
+@keyframes foreground-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
+@keyframes entry{0%,100%{transform:translateY(12px)}12%,86%{transform:translateY(0)}}
+@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
+@keyframes light{0%,100%{opacity:.18}50%{opacity:.24}}
+@keyframes rim{0%,100%{opacity:.42}50%{opacity:.5}}
+</style>
+</head>
+<body>
+<div id="cover" data-composition-id="readme-cover" data-start="0" data-duration="5" data-width="1600" data-height="800" data-no-timeline>
+<img id="background-far" src="public/background.png" alt=""><img id="background-mid" src="public/background.png" alt=""><div id="field"></div><img id="foreground-plane" src="public/background.png" alt=""><div id="glow"></div><div id="rim-light"></div><div id="grain"></div><div id="rules"></div>
+<img id="label" src="public/label-light-ink.svg" alt="LOCAL / RESEARCH"><div id="type"><img id="title" src="public/title-light-ink.svg" alt="Research Notes"><img id="subtitle" src="public/subtitle-light-ink.svg" alt="연구를 기록하는 작은 공간"></div>
+<svg id="pixels" viewBox="0 0 192 192" aria-label="Original pixel observatory"></svg>
+</div>
+<script>
+const rows=['000011110000','001111111100','011100001110','111001100111','110011110011','110111111011','110011110011','111001100111','011100001110','001111111100','000011110000'];
+const svg=document.querySelector('#pixels');rows.forEach((row,y)=>[...row].forEach((v,x)=>{if(v==='1'){const r=document.createElementNS('http://www.w3.org/2000/svg','rect');for(const[k,a]of Object.entries({x:x*12+24,y:y*12+20,width:12,height:12,fill:(x+y)%3===0?'#e77746':'#dce9d4'}))r.setAttribute(k,a);svg.append(r)}}));
+</script>
+</body>
+</html>

package/.grok/skills/readme-studio/templates/hyperframes/index.motion.json

@@ -0,0 +1,4 @@
+{
+  "duration": 5,
+  "assertions": [{"kind": "keepsMoving", "withinSelector": "#cover", "maxStaticSec": 1.2}]
+}