{"id":24141,"date":"2026-07-18T14:21:29","date_gmt":"2026-07-18T21:21:29","guid":{"rendered":"https:\/\/jnack.com\/blog\/?p=24141"},"modified":"2026-07-18T14:21:41","modified_gmt":"2026-07-18T21:21:41","slug":"joy-scrolling","status":"publish","type":"post","link":"https:\/\/jnack.com\/blog\/2026\/07\/18\/joy-scrolling\/","title":{"rendered":"Joy-scrolling 3D"},"content":{"rendered":"\n<p>I love the art direction on <a href=\"https:\/\/demo-03-track.hirotos.com\/\">this site<\/a>, where the pace of animation is controlled by your scrolling:<\/p>\n\n\n<blockquote class=\"twitter-tweet\">\n<p dir=\"ltr\" lang=\"en\">Japanese designers are goated, but have you seen the devs? This experimental piece from Hiroto Sato is next level <a href=\"https:\/\/t.co\/c4cp6dWlbx\">pic.twitter.com\/c4cp6dWlbx<\/a><\/p>\n<p>\u2014 Edoardo Lunardi (@edo_lunardi) <a href=\"https:\/\/x.com\/edo_lunardi\/status\/2078038390595797149?ref_src=twsrc%5Etfw\">July 17, 2026<\/a><\/p>\n<\/blockquote>\n<p><script async=\"\" src=\"https:\/\/platform.x.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>Meanwhile the &#8220;<a href=\"https:\/\/github.com\/oso95\/scroll-world\">Scroll World<\/a>&#8221; Claude skill promises to interview you (!), then whip something up with the help of generative text-to-video tech (gotta get Omni in there!).<\/p>\n<p>\u00a0<\/p>\n<blockquote class=\"twitter-tweet\">\n<p dir=\"ltr\" lang=\"en\">I built a skill to let my Claude Code build premium landing pages like this in one shot. The 3 sites in the video are one-shot results, ~$10-15 each.<\/p>\n<p>Register <a href=\"https:\/\/x.com\/higgsfield_ai?ref_src=twsrc%5Etfw\">@higgsfield_ai<\/a> , install the CLI and scroll-world skill, hand the rest to Claude Code. <a href=\"https:\/\/t.co\/dO6XJaF7MI\">pic.twitter.com\/dO6XJaF7MI<\/a><\/p>\n<p>\u2014 Peter Wang (@the_cyw) <a href=\"https:\/\/x.com\/the_cyw\/status\/2075033876930724339?ref_src=twsrc%5Etfw\">July 9, 2026<\/a><\/p>\n<\/blockquote>\n<p><script async=\"\" src=\"https:\/\/platform.x.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n\n\n<p>How it works is intriguing enough to quote at length from the GitHub page:<\/p>\n\n\n\n<p>&#8212;&#8211;<\/p>\n\n\n\n<p>It leans on&nbsp;<a href=\"https:\/\/higgsfield.ai\/\">Higgsfield<\/a>&nbsp;for the art: cohesive isometric diorama scenes (GPT Image 2 \u2014 via Higgsfield, or the Codex CLI on a ChatGPT subscription) and the camera flights themselves (Seedance or Kling image-to-video \u2014 only models that can frame-lock a seam), scrubbed by scroll position \u2014 the same technique behind Apple&#8217;s scroll-through product pages. The camera genuinely moves; scroll only drives time. It&#8217;s&nbsp;<strong>framework-agnostic<\/strong>: you get the Higgsfield pipeline, the prompt templates, and a portable vanilla-JS scrub engine that drops into plain HTML, Next.js, Vue, or a Python-served page \u2014 nothing assumes a stack.<\/p>\n\n\n\n<p>When invoked, the skill:<\/p>\n\n\n\n<ol>\n<li><strong>Interviews you<\/strong>&nbsp;\u2014 the subject\/industry + pitch, a brand kit (import from a URL, hand it over, or have it proposed), art direction, the ordered scenes the camera visits, whether you want the&nbsp;<strong>mobile version<\/strong>&nbsp;(a second chain rendered natively in 9:16 portrait \u2014 composed for phones, not a crop of the landscape film), and the&nbsp;<strong>budget<\/strong>&nbsp;\u2014 render tiers and stills source shown with estimated credit costs, approved before anything generates.<\/li>\n\n\n\n<li><strong>Generates the assets<\/strong>&nbsp;\u2014 one still per scene, one &#8220;dive-in&#8221; camera clip per scene, and the&nbsp;<strong>connector<\/strong>&nbsp;clips that join consecutive scenes, generated from the actual rendered frames of their neighbours so every seam is frame-identical. Mobile opt-in renders a parallel portrait chain the same way, frame-locked against its own 9:16 renders.<\/li>\n\n\n\n<li><strong>Wires it up<\/strong>&nbsp;\u2014 a config-driven scroll engine that plays the whole chain as one flight, serving the portrait clips and posters automatically on phones.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>I love the art direction on this site, where the pace of animation is controlled by your scrolling: Japanese designers are goated, but have you seen the devs? This experimental piece from Hiroto Sato is next level pic.twitter.com\/c4cp6dWlbx \u2014 Edoardo Lunardi (@edo_lunardi) July 17, 2026 Meanwhile the &#8220;Scroll World&#8221; Claude skill promises to interview you [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":[],"categories":[18,66],"tags":[],"_links":{"self":[{"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/posts\/24141"}],"collection":[{"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/comments?post=24141"}],"version-history":[{"count":2,"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/posts\/24141\/revisions"}],"predecessor-version":[{"id":24143,"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/posts\/24141\/revisions\/24143"}],"wp:attachment":[{"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/media?parent=24141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/categories?post=24141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/tags?post=24141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}