{ "id": "showcase-060-iphone-notes-typing", "css": "", "fps": 30, "html": "
9:41
5G 87%
Notes
3 September 2026 at 9:41
Launch notes
", "name": "060 — Notes, As They Happen", "width": 1080, "format": "jsoncut-html", "height": 1920, "values": {}, "version": 1, "duration": 10, "safeArea": { "top": 0, "left": 0, "right": 0, "bottom": 0 }, "variables": [], "customBlocks": [ { "css": "\n#surface{position:relative;width:1080px;height:1528px;overflow:hidden;color:#1c1c1e;font-family:-apple-system,BlinkMacSystemFont,\"SF Pro Text\",\"Helvetica Neue\",Arial,sans-serif}\n#note-copy{position:absolute;left:68px;top:0;width:944px;height:650px;font-size:46px;line-height:1.22;font-weight:400;white-space:pre-wrap;letter-spacing:-.012em}\n#caret{display:inline-block;width:3px;height:49px;margin-left:3px;vertical-align:-8px;background:#1c1c1e;border-radius:2px}\n#keyboard{position:absolute;left:0;top:800px;width:1080px;height:728px;box-sizing:border-box;padding:22px 22px 0;background:linear-gradient(180deg,#d6d8dd,#cdd0d6);border-top:1px solid #b9bcc2;will-change:transform}\n.key-row{display:flex;gap:12px;height:106px;margin-bottom:18px;justify-content:center}\n.key-row.inset{padding:0 48px}\n.key{height:106px;min-width:0;flex:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:13px;background:#fff;color:#111;font-size:34px;font-weight:400;box-shadow:0 3px 1px rgba(70,72,78,.42);transform-origin:50% 100%;transition:none}\n.key.utility{background:#aeb1b8;font-size:27px;font-weight:500}\n.key.active{background:#a5a8af;transform:translateY(5px) scale(.94);box-shadow:0 1px 0 rgba(70,72,78,.34)}\n#row-z .key.letter{flex:0 0 88px}\n#row-z .key.utility{flex:0 0 126px}\n#row-bottom{gap:22px}\n#row-bottom .numbers{flex:0 0 152px}\n#row-bottom .space{flex:1}\n#row-bottom .return{flex:0 0 148px}\n.keyboard-meta{position:absolute;left:30px;right:30px;top:510px;display:flex;justify-content:space-between;color:#77797f;font-size:28px}\n.home-indicator{position:absolute;left:397px;bottom:30px;width:286px;height:12px;border-radius:6px;background:#171717}\n#key-popup{position:absolute;display:none;z-index:4;width:104px;height:126px;border-radius:16px 16px 13px 13px;background:#fff;color:#111;font-size:50px;align-items:center;justify-content:center;box-shadow:0 5px 14px rgba(50,52,58,.28);transform:translate(-8px,-116px)}\n", "html": "
☺⌕
", "inputs": { "text": "The best ideas get clearer\nwhen you write them down.\n\nStart with the one thing\npeople should remember." }, "adapter": "dom", "layerId": "m60-typing-keyboard", "javascript": "\nconst surface=document.getElementById('surface');\nconst typed=document.getElementById('typed-content');\nconst caret=document.getElementById('caret');\nconst keyboard=document.getElementById('keyboard');\nconst popup=document.getElementById('key-popup');\nconst input=String(jsoncut.inputs.text||'');\nconst keyNodes=new Map();\nconst addKey=(row,label,keyName,classes='letter')=>{\n const node=document.createElement('div');\n node.className='key '+classes;\n node.textContent=label;\n node.dataset.key=keyName;\n row.appendChild(node);\n keyNodes.set(keyName,node);\n return node;\n};\nconst q=document.getElementById('row-q');\nconst a=document.getElementById('row-a');\nconst z=document.getElementById('row-z');\nconst bottom=document.getElementById('row-bottom');\nfor(const ch of 'qwertyuiop') addKey(q,ch.toUpperCase(),ch);\nfor(const ch of 'asdfghjkl') addKey(a,ch.toUpperCase(),ch);\naddKey(z,'⇧','shift','utility');\nfor(const ch of 'zxcvbnm') addKey(z,ch.toUpperCase(),ch);\naddKey(z,'⌫','backspace','utility');\naddKey(bottom,'123','numbers','utility numbers');\naddKey(bottom,'space','space','utility space');\naddKey(bottom,'return','return','utility return');\nconst pressKey=(character)=>{\n if(character==='\\n') return 'return';\n if(character===' '||character==='.'||character===',') return 'space';\n const normalized=character.toLowerCase();\n return keyNodes.has(normalized)?normalized:'';\n};\nconst clamp=(value,min,max)=>Math.max(min,Math.min(max,value));\nconst typingStart=1.05;\nconst typingEnd=8.55;\nconst typingSpan=Math.max(.1,typingEnd-typingStart);\nconst rate=Math.max(1,input.length/typingSpan);\njsoncut.onFrame(()=>{\n const time=jsoncut.time;\n const keyboardProgress=clamp((time-.12)/.62,0,1);\n const keyboardEase=1-Math.pow(1-keyboardProgress,3);\n keyboard.style.transform='translateY('+((1-keyboardEase)*728).toFixed(2)+'px)';\n const exact=clamp((time-typingStart)*rate,0,input.length);\n const count=Math.floor(exact);\n typed.textContent=input.slice(0,count);\n caret.style.opacity=time9.35?'0':(Math.floor(time*2)%2?'1':'.18');\n for(const node of keyNodes.values()) node.classList.remove('active');\n popup.style.display='none';\n if(time>=typingStart&&count