{"id":"cover-story","title":"Cover story","category":"Editorial","prompt":"A magazine cover that assembles itself over a photograph of a railway line running away into summer trees (pinned in our own storage, so the render never fetches a third-party host). The masthead 'P I N E P A P E R' types on across the top between thin rules, a cyan kicker fades in — 'the graph issue — no. 01'. Two headline lines slide up staggered from the lower left: 'Alive by' in white, 'relations.' in cyan. A golden twelve-point starburst badge rotates slowly upper right reading REAL RENDER, and a deck line arrives last: 'designed by a model · rendered by the API'. A slow breathing vignette keeps the frame alive. Scored with open-license music.","designedBy":{"provider":"anthropic","model":"claude-fable-5","inference":{"inputTokens":0,"outputTokens":0,"costUsd":0,"inPerMTokUsd":10,"outPerMTokUsd":50,"interactive":true}},"render":{"jobId":"rnd_1788538145220_muex38","credits":8,"priceUsd":0.12,"format":"mp4","renderMs":80308,"frameCount":240,"bytes":696004,"seed":62066278,"engineVersion":"v0.5.6","width":1440,"height":1080,"fps":30,"durationSeconds":8},"howToReproduce":{"renderApi":"POST /v1/renders with `renderRequest` below as the body (Authorization: Bearer <your pp_sa_… key>).","editor":"/gallery/cover-story/editor opens this piece live in the studio.","codeConsole":"/gallery/cover-story.js is this piece as PinePaper code — paste it into the editor's AI code console."},"renderRequest":{"scene":{"canvas":{"width":800,"height":600},"items":[],"relations":[],"generators":[],"media":[],"skeletons":[],"background":"#020617","engineOps":[{"tool":"execute_custom_code","args":{"description":"Cover story: masthead, kicker, staggered headline, rotating badge over the pinned photo","code":"function prng(seed){var t=seed>>>0;return function(){t+=0x6D2B79F5;var r=Math.imul(t^(t>>>15),1|t);r^=r+Math.imul(r^(r>>>7),61|r);return((r^(r>>>14))>>>0)/4294967296;}}\nvar r0 = prng(20260817);\n// Pinned cover photo, full bleed — an ENGINE image item, created first so\n// everything else sits on top of it. A raw paper.Raster draws above every\n// app-created item no matter what sendToBack() says, and that is exactly\n// what happened: the photograph rendered perfectly and the masthead, the\n// kicker, both headlines, the badge and the deck were all behind it, in\n// every frame. The render page has NO network (every off-origin request\n// is aborted by design), so imagery comes only from the engine's own\n// preloaded asset map: same-origin /scene-assets/ paths uploaded beside\n// the engine build in R2.\nvar COVER = (window.__ppAssets && window.__ppAssets['/scene-assets/cover-photo.jpg']) || '/scene-assets/cover-photo.jpg';\nPinePaper.create('image', { src: COVER, x: 400, y: 300, width: 800, height: 600 });\n// SCRIMS. The photograph is a pale summer sky over bright gravel, and for\n// eight seconds this cover set white type straight onto both: the\n// masthead, the three coverlines and the deck line were all invisible in\n// the render, which is only obvious once the imagery actually loads. Every\n// magazine solves this the same way — a gradient scrim under the type,\n// over the picture. Two of them, ramping away from the edges they serve,\n// so the middle of the photograph stays untouched.\nvar topScrim = PinePaper.create('rectangle', { x: 400, y: 105, width: 800, height: 210, fillColor: '#020617' });\ntopScrim.fillColor = { gradient: { stops: [[new paper.Color(2/255, 6/255, 23/255, 0.92), 0], [new paper.Color(2/255, 6/255, 23/255, 0.72), 0.62], [new paper.Color(2/255, 6/255, 23/255, 0), 1]] }, origin: [400, 0], destination: [400, 210] };\nvar botScrim = PinePaper.create('rectangle', { x: 400, y: 425, width: 800, height: 350, fillColor: '#020617' });\nbotScrim.fillColor = { gradient: { stops: [[new paper.Color(2/255, 6/255, 23/255, 0), 0], [new paper.Color(2/255, 6/255, 23/255, 0.55), 0.42], [new paper.Color(2/255, 6/255, 23/255, 0.93), 1]] }, origin: [400, 250], destination: [400, 600] };\n// Breathing vignette: a huge soft-edged dark ring pulsing very slowly.\nvar vig = PinePaper.create('circle', { x: 400, y: 300, radius: 520, fillColor: null, strokeColor: '#020617', strokeWidth: 320, opacity: 0.5 });\nPinePaper.animate(vig, { animationType: 'pulse', speed: 0.18 });\n// Masthead: PINEPAPER letterspaced across the top, typed on.\nvar mast = PinePaper.create('text', { x: 400, y: 84, content: '', fontSize: 58, fontWeight: 'bold', fillColor: '#f8fafc' });\nPinePaper.modifyItem(mast, { animationType: 'keyframe', duration: 8, keyframes: [{ time: 0, properties: { content: '' } }, { time: 0.40, properties: { content: '' } }, { time: 0.485, properties: { content: 'P' } }, { time: 0.570, properties: { content: 'P ' } }, { time: 0.655, properties: { content: 'P I' } }, { time: 0.740, properties: { content: 'P I ' } }, { time: 0.825, properties: { content: 'P I N' } }, { time: 0.910, properties: { content: 'P I N ' } }, { time: 0.995, properties: { content: 'P I N E' } }, { time: 1.080, properties: { content: 'P I N E ' } }, { time: 1.165, properties: { content: 'P I N E P' } }, { time: 1.250, properties: { content: 'P I N E P ' } }, { time: 1.335, properties: { content: 'P I N E P A' } }, { time: 1.420, properties: { content: 'P I N E P A ' } }, { time: 1.505, properties: { content: 'P I N E P A P' } }, { time: 1.590, properties: { content: 'P I N E P A P ' } }, { time: 1.675, properties: { content: 'P I N E P A P E' } }, { time: 1.760, properties: { content: 'P I N E P A P E ' } }, { time: 1.845, properties: { content: 'P I N E P A P E R' } }, { time: 8.00, properties: { content: 'P I N E P A P E R' } }] });\n// Kicker under the masthead.\nvar kick = PinePaper.create('text', { x: 400, y: 130, content: 'the graph issue \\u2014 no. 01', fontSize: 19, fillColor: '#a5f3fc' });\nPinePaper.animate(kick, { animationType: 'fade', speed: 0.4 });\n// Thin rules framing the masthead block.\nPinePaper.create('line', { from: [60, 152], to: [740, 152], strokeColor: '#e2e8f0', strokeWidth: 1, opacity: 0.7 });\nPinePaper.create('line', { from: [60, 44], to: [740, 44], strokeColor: '#e2e8f0', strokeWidth: 1, opacity: 0.7 });\n// Headline: two lines, lower left, sliding up staggered via keyframes.\nvar h1 = PinePaper.create('text', { x: 218, y: 452, content: 'Alive by', fontSize: 64, fontWeight: 'bold', fillColor: '#f8fafc' });\nPinePaper.modifyItem(h1, { animationType: 'keyframe', keyframes: [ { time: 0, properties: { opacity: 0, y: 484 } }, { time: 0.8, properties: { opacity: 0, y: 484 } }, { time: 1.5, properties: { opacity: 1, y: 452 }, easing: 'easeOut' } ], duration: 8 });\nvar h2 = PinePaper.create('text', { x: 246, y: 516, content: 'relations.', fontSize: 64, fontWeight: 'bold', fillColor: '#7dd3fc' });\nPinePaper.modifyItem(h2, { animationType: 'keyframe', keyframes: [ { time: 0, properties: { opacity: 0, y: 548 } }, { time: 1.2, properties: { opacity: 0, y: 548 } }, { time: 1.9, properties: { opacity: 1, y: 516 }, easing: 'easeOut' } ], duration: 8 });\n// Deck line, bottom LEFT under the headline, arriving last. It used to sit\n// at x 583 y 560 — straight through the barcode, which prints itself from\n// x 640 across the same baseline. Two elements, one line of the layout.\nPinePaper.create('line', { from: [64, 552], to: [420, 552], strokeColor: '#94a3b8', strokeWidth: 1, opacity: 0.55 });\nvar deck = PinePaper.create('text', { x: 242, y: 574, content: 'designed by a model \\u00b7 rendered by the API', fontSize: 16, fillColor: '#e2e8f0' });\nPinePaper.modifyItem(deck, { animationType: 'keyframe', keyframes: [ { time: 0, properties: { opacity: 0 } }, { time: 2.4, properties: { opacity: 0 } }, { time: 3.1, properties: { opacity: 0.95 } } ], duration: 8 });\n// Rotating starburst badge, upper right.\nvar badge = PinePaper.create('star', { x: 668, y: 220, points: 12, radius1: 56, radius2: 44, fillColor: '#fbbf24', opacity: 0.95 });\nPinePaper.animate(badge, { animationType: 'rotate', speed: 0.22 });\nvar badgeTxt = PinePaper.create('text', { x: 668, y: 220, content: 'REAL\\nRENDER', fontSize: 16, fontWeight: 'bold', fillColor: '#1c1917' });\n// Coverlines: a right-edge stack sliding in staggered, like a real issue.\n// Moved down out of the bright treeline and into the bottom scrim, each on\n// its own hairline rule so the stack reads as a cover panel rather than as\n// three sentences dropped on a photograph.\nvar lines = ['THE RENDER ECONOMY', 'INSIDE THE ONTOLOGY', 'MODELS AS DESIGNERS'];\nfor (var li = 0; li < lines.length; li++) {\n  var ly = 396 + li * 36;\n  var lt = PinePaper.create('text', { x: 648, y: ly, content: lines[li], fontSize: 16, fillColor: li === 1 ? '#7dd3fc' : '#f1f5f9' });\n  var lr = PinePaper.create('line', { from: [548, ly + 13], to: [748, ly + 13], strokeColor: '#64748b', strokeWidth: 1, opacity: 0 });\n  PinePaper.modifyItem(lt, { animationType: 'keyframe', duration: 8, keyframes: [\n    { time: 0, properties: { opacity: 0, x: 720 } },\n    { time: 2.0 + li * 0.35, properties: { opacity: 0, x: 720 } },\n    { time: 2.6 + li * 0.35, properties: { opacity: 1, x: 648 }, easing: 'easeOut' },\n    { time: 8, properties: { opacity: 1, x: 648 } }\n  ] });\n  PinePaper.modifyItem(lr, { animationType: 'keyframe', duration: 8, keyframes: [\n    { time: 0, properties: { opacity: 0 } },\n    { time: 2.2 + li * 0.35, properties: { opacity: 0 } },\n    { time: 2.8 + li * 0.35, properties: { opacity: 0.5 } },\n    { time: 8, properties: { opacity: 0.5 } }\n  ] });\n}\n// A barcode that prints itself, bottom right — 24 bars, sequential, on its\n// own white plate so it reads as printed matter and not as interference.\nvar plate = PinePaper.create('rectangle', { x: 692, y: 556, width: 152, height: 52, fillColor: '#f8fafc', opacity: 0 });\nPinePaper.modifyItem(plate, { animationType: 'keyframe', duration: 8, keyframes: [\n  { time: 0, properties: { opacity: 0 } }, { time: 4.4, properties: { opacity: 0 } },\n  { time: 4.7, properties: { opacity: 0.92 } }, { time: 8, properties: { opacity: 0.92 } } ] });\nvar bx = 628;\nfor (var bi = 0; bi < 24; bi++) {\n  var bw = 1.5 + r0() * 3.0;\n  var bar = PinePaper.create('rectangle', { x: bx, y: 553, width: bw, height: 32, fillColor: '#0f172a', opacity: 0 });\n  PinePaper.modifyItem(bar, { animationType: 'keyframe', duration: 8, keyframes: [\n    { time: 0, properties: { opacity: 0 } },\n    { time: 4.6 + bi * 0.055, properties: { opacity: 0 } },\n    { time: 4.72 + bi * 0.055, properties: { opacity: 0.95 } },\n    { time: 8, properties: { opacity: 0.95 } }\n  ] });\n  bx += bw + 1.9;\n}"}}]},"exportProfile":{"format":"mp4","resolution":"1080p","fps":30,"durationSeconds":6},"source":{"prompt":"A magazine cover that assembles itself over a photograph of a railway line running away into summer trees (pinned in our own storage, so the render never fetches a third-party host). The masthead 'P I N E P A P E R' types on across the top between thin rules, a cyan kicker fades in — 'the graph issue — no. 01'. Two headline lines slide up staggered from the lower left: 'Alive by' in white, 'relations.' in cyan. A golden twelve-point starburst badge rotates slowly upper right reading REAL RENDER, and a deck line arrives last: 'designed by a model · rendered by the API'. A slow breathing vignette keeps the frame alive. Scored with open-license music.","provider":"anthropic","model":"claude-fable-5","app":"gallery-reproduction"}},"ops":[{"tool":"pinepaper_set_background_color","args":{"color":"#020617"}},{"tool":"pinepaper_execute_custom_code","args":{"description":"Cover story: masthead, kicker, staggered headline, rotating badge over the pinned photo","code":"function prng(seed){var t=seed>>>0;return function(){t+=0x6D2B79F5;var r=Math.imul(t^(t>>>15),1|t);r^=r+Math.imul(r^(r>>>7),61|r);return((r^(r>>>14))>>>0)/4294967296;}}\nvar r0 = prng(20260817);\n// Pinned cover photo, full bleed — an ENGINE image item, created first so\n// everything else sits on top of it. A raw paper.Raster draws above every\n// app-created item no matter what sendToBack() says, and that is exactly\n// what happened: the photograph rendered perfectly and the masthead, the\n// kicker, both headlines, the badge and the deck were all behind it, in\n// every frame. The render page has NO network (every off-origin request\n// is aborted by design), so imagery comes only from the engine's own\n// preloaded asset map: same-origin /scene-assets/ paths uploaded beside\n// the engine build in R2.\nvar COVER = (window.__ppAssets && window.__ppAssets['/scene-assets/cover-photo.jpg']) || '/scene-assets/cover-photo.jpg';\nPinePaper.create('image', { src: COVER, x: 400, y: 300, width: 800, height: 600 });\n// SCRIMS. The photograph is a pale summer sky over bright gravel, and for\n// eight seconds this cover set white type straight onto both: the\n// masthead, the three coverlines and the deck line were all invisible in\n// the render, which is only obvious once the imagery actually loads. Every\n// magazine solves this the same way — a gradient scrim under the type,\n// over the picture. Two of them, ramping away from the edges they serve,\n// so the middle of the photograph stays untouched.\nvar topScrim = PinePaper.create('rectangle', { x: 400, y: 105, width: 800, height: 210, fillColor: '#020617' });\ntopScrim.fillColor = { gradient: { stops: [[new paper.Color(2/255, 6/255, 23/255, 0.92), 0], [new paper.Color(2/255, 6/255, 23/255, 0.72), 0.62], [new paper.Color(2/255, 6/255, 23/255, 0), 1]] }, origin: [400, 0], destination: [400, 210] };\nvar botScrim = PinePaper.create('rectangle', { x: 400, y: 425, width: 800, height: 350, fillColor: '#020617' });\nbotScrim.fillColor = { gradient: { stops: [[new paper.Color(2/255, 6/255, 23/255, 0), 0], [new paper.Color(2/255, 6/255, 23/255, 0.55), 0.42], [new paper.Color(2/255, 6/255, 23/255, 0.93), 1]] }, origin: [400, 250], destination: [400, 600] };\n// Breathing vignette: a huge soft-edged dark ring pulsing very slowly.\nvar vig = PinePaper.create('circle', { x: 400, y: 300, radius: 520, fillColor: null, strokeColor: '#020617', strokeWidth: 320, opacity: 0.5 });\nPinePaper.animate(vig, { animationType: 'pulse', speed: 0.18 });\n// Masthead: PINEPAPER letterspaced across the top, typed on.\nvar mast = PinePaper.create('text', { x: 400, y: 84, content: '', fontSize: 58, fontWeight: 'bold', fillColor: '#f8fafc' });\nPinePaper.modifyItem(mast, { animationType: 'keyframe', duration: 8, keyframes: [{ time: 0, properties: { content: '' } }, { time: 0.40, properties: { content: '' } }, { time: 0.485, properties: { content: 'P' } }, { time: 0.570, properties: { content: 'P ' } }, { time: 0.655, properties: { content: 'P I' } }, { time: 0.740, properties: { content: 'P I ' } }, { time: 0.825, properties: { content: 'P I N' } }, { time: 0.910, properties: { content: 'P I N ' } }, { time: 0.995, properties: { content: 'P I N E' } }, { time: 1.080, properties: { content: 'P I N E ' } }, { time: 1.165, properties: { content: 'P I N E P' } }, { time: 1.250, properties: { content: 'P I N E P ' } }, { time: 1.335, properties: { content: 'P I N E P A' } }, { time: 1.420, properties: { content: 'P I N E P A ' } }, { time: 1.505, properties: { content: 'P I N E P A P' } }, { time: 1.590, properties: { content: 'P I N E P A P ' } }, { time: 1.675, properties: { content: 'P I N E P A P E' } }, { time: 1.760, properties: { content: 'P I N E P A P E ' } }, { time: 1.845, properties: { content: 'P I N E P A P E R' } }, { time: 8.00, properties: { content: 'P I N E P A P E R' } }] });\n// Kicker under the masthead.\nvar kick = PinePaper.create('text', { x: 400, y: 130, content: 'the graph issue \\u2014 no. 01', fontSize: 19, fillColor: '#a5f3fc' });\nPinePaper.animate(kick, { animationType: 'fade', speed: 0.4 });\n// Thin rules framing the masthead block.\nPinePaper.create('line', { from: [60, 152], to: [740, 152], strokeColor: '#e2e8f0', strokeWidth: 1, opacity: 0.7 });\nPinePaper.create('line', { from: [60, 44], to: [740, 44], strokeColor: '#e2e8f0', strokeWidth: 1, opacity: 0.7 });\n// Headline: two lines, lower left, sliding up staggered via keyframes.\nvar h1 = PinePaper.create('text', { x: 218, y: 452, content: 'Alive by', fontSize: 64, fontWeight: 'bold', fillColor: '#f8fafc' });\nPinePaper.modifyItem(h1, { animationType: 'keyframe', keyframes: [ { time: 0, properties: { opacity: 0, y: 484 } }, { time: 0.8, properties: { opacity: 0, y: 484 } }, { time: 1.5, properties: { opacity: 1, y: 452 }, easing: 'easeOut' } ], duration: 8 });\nvar h2 = PinePaper.create('text', { x: 246, y: 516, content: 'relations.', fontSize: 64, fontWeight: 'bold', fillColor: '#7dd3fc' });\nPinePaper.modifyItem(h2, { animationType: 'keyframe', keyframes: [ { time: 0, properties: { opacity: 0, y: 548 } }, { time: 1.2, properties: { opacity: 0, y: 548 } }, { time: 1.9, properties: { opacity: 1, y: 516 }, easing: 'easeOut' } ], duration: 8 });\n// Deck line, bottom LEFT under the headline, arriving last. It used to sit\n// at x 583 y 560 — straight through the barcode, which prints itself from\n// x 640 across the same baseline. Two elements, one line of the layout.\nPinePaper.create('line', { from: [64, 552], to: [420, 552], strokeColor: '#94a3b8', strokeWidth: 1, opacity: 0.55 });\nvar deck = PinePaper.create('text', { x: 242, y: 574, content: 'designed by a model \\u00b7 rendered by the API', fontSize: 16, fillColor: '#e2e8f0' });\nPinePaper.modifyItem(deck, { animationType: 'keyframe', keyframes: [ { time: 0, properties: { opacity: 0 } }, { time: 2.4, properties: { opacity: 0 } }, { time: 3.1, properties: { opacity: 0.95 } } ], duration: 8 });\n// Rotating starburst badge, upper right.\nvar badge = PinePaper.create('star', { x: 668, y: 220, points: 12, radius1: 56, radius2: 44, fillColor: '#fbbf24', opacity: 0.95 });\nPinePaper.animate(badge, { animationType: 'rotate', speed: 0.22 });\nvar badgeTxt = PinePaper.create('text', { x: 668, y: 220, content: 'REAL\\nRENDER', fontSize: 16, fontWeight: 'bold', fillColor: '#1c1917' });\n// Coverlines: a right-edge stack sliding in staggered, like a real issue.\n// Moved down out of the bright treeline and into the bottom scrim, each on\n// its own hairline rule so the stack reads as a cover panel rather than as\n// three sentences dropped on a photograph.\nvar lines = ['THE RENDER ECONOMY', 'INSIDE THE ONTOLOGY', 'MODELS AS DESIGNERS'];\nfor (var li = 0; li < lines.length; li++) {\n  var ly = 396 + li * 36;\n  var lt = PinePaper.create('text', { x: 648, y: ly, content: lines[li], fontSize: 16, fillColor: li === 1 ? '#7dd3fc' : '#f1f5f9' });\n  var lr = PinePaper.create('line', { from: [548, ly + 13], to: [748, ly + 13], strokeColor: '#64748b', strokeWidth: 1, opacity: 0 });\n  PinePaper.modifyItem(lt, { animationType: 'keyframe', duration: 8, keyframes: [\n    { time: 0, properties: { opacity: 0, x: 720 } },\n    { time: 2.0 + li * 0.35, properties: { opacity: 0, x: 720 } },\n    { time: 2.6 + li * 0.35, properties: { opacity: 1, x: 648 }, easing: 'easeOut' },\n    { time: 8, properties: { opacity: 1, x: 648 } }\n  ] });\n  PinePaper.modifyItem(lr, { animationType: 'keyframe', duration: 8, keyframes: [\n    { time: 0, properties: { opacity: 0 } },\n    { time: 2.2 + li * 0.35, properties: { opacity: 0 } },\n    { time: 2.8 + li * 0.35, properties: { opacity: 0.5 } },\n    { time: 8, properties: { opacity: 0.5 } }\n  ] });\n}\n// A barcode that prints itself, bottom right — 24 bars, sequential, on its\n// own white plate so it reads as printed matter and not as interference.\nvar plate = PinePaper.create('rectangle', { x: 692, y: 556, width: 152, height: 52, fillColor: '#f8fafc', opacity: 0 });\nPinePaper.modifyItem(plate, { animationType: 'keyframe', duration: 8, keyframes: [\n  { time: 0, properties: { opacity: 0 } }, { time: 4.4, properties: { opacity: 0 } },\n  { time: 4.7, properties: { opacity: 0.92 } }, { time: 8, properties: { opacity: 0.92 } } ] });\nvar bx = 628;\nfor (var bi = 0; bi < 24; bi++) {\n  var bw = 1.5 + r0() * 3.0;\n  var bar = PinePaper.create('rectangle', { x: bx, y: 553, width: bw, height: 32, fillColor: '#0f172a', opacity: 0 });\n  PinePaper.modifyItem(bar, { animationType: 'keyframe', duration: 8, keyframes: [\n    { time: 0, properties: { opacity: 0 } },\n    { time: 4.6 + bi * 0.055, properties: { opacity: 0 } },\n    { time: 4.72 + bi * 0.055, properties: { opacity: 0.95 } },\n    { time: 8, properties: { opacity: 0.95 } }\n  ] });\n  bx += bw + 1.9;\n}"}}],"license":"CC0-1.0"}