56:I[473921,["/creators-assets/_next/static/immutable/chunks/1hsplt7jfjgnh.js","/creators-assets/_next/static/immutable/chunks/0ct7__d3eqq0r.js","/creators-assets/_next/static/immutable/chunks/0c-r9a3oxph1w.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/1tyeiicl34tqo.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/1co9epfn9jp6v.js","/creators-assets/_next/static/immutable/chunks/1zalsqf-ioaic.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/2e-sz6cfsc9_9.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/3or5zvywp1ubp.js","/creators-assets/_next/static/immutable/chunks/1k3rwcufrnywl.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/0lx6ikbaymow8.js","/creators-assets/_next/static/immutable/chunks/15z5hu5cixks0.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/102julo6bufcv.js","/creators-assets/_next/static/immutable/chunks/0ina8hhu8zfh2.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/2_dm0za3asre2.js","/creators-assets/_next/static/immutable/chunks/1mpx4d_3k5had.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/3_ujmu63m88vf.js","/creators-assets/_next/static/immutable/chunks/25l6djez1lvts.js","/creators-assets/_next/static/immutable/chunks/3pe6luvwzbwnz.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3un-l23eued0s.js","/creators-assets/_next/static/immutable/chunks/3nzo9vld-4e3c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/31lxg3j13mof7.js"],"PostDetailCard"] 57:T879,

ORDO is a landing page template for AI infrastructure, developer tools and technical SaaS. It’s built in a monochrome Swiss style: thin technical gridlines, mono labels and large editorial type. Its signature is a set of procedural 3D halftone sculptures made from thousands of dots, rendered in real time with WebGL. They aren’t videos or images.

The hero sculpture rotates, tilts toward the cursor, pushes its dots away from the pointer and morphs between three forms when clicked. It can be drawn in five visual modes: halftone surface, wireframe + dots, particle geometry, dithered point cloud and dot matrix. Further down, a full-screen scroll scene assembles a sculpture from particles, expands it, morphs it and finally rearranges it into a clean lattice.

What’s included

8 sections: hero, logo row, platform features, interactive product showcase, immersive 3D scroll scene, metrics with a live signal chart, developer section with a code editor, and a CTA footer with an interactive dot field
Desktop, tablet and phone layouts, with a fullscreen mobile menu
Pinned scroll showcase: four workflow stages with animated connections and pixel-wipe transitions
Code editor with JavaScript, Python and CLI tabs, a typewriter effect, a copy button and a deploy status
Live latency graph you can inspect with the mouse or the arrow keys
Six animated feature illustrations, each with its own hover behaviour
Footer dot field that ripples around the cursor and reveals a ghosted wordmark
Reusable components: Button (5 styles with hover states), Section Heading and Feature Card
Color styles and text styles throughout (Geist and Geist Mono)

Easy to customise Every visual effect is a code component with clear property controls. You can change the shapes, dot size, dot spacing, particle density, rotation speed, noise, hover wave, mouse strength, perspective and colors without touching code. Effects respect reduced-motion settings and pause when off screen.

53:[["$","$L56",null,{"post":{"id":"01a14ecd-c402-73df-a042-de7020d9335b","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"ad8feb8e-f9b9-4619-9237-5bee96cbb732","name":"Lalit","slug":"madebylalit","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ad8feb8e-f9b9-4619-9237-5bee96cbb732/6e0k19fx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"76229","resolved":true,"title":"ORDOO","body":"$57","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"ORDO is a landing page template for AI infrastructure, developer tools and technical SaaS. It’s built in a monochrome Swiss style: thin technical gridlines, mono labels and large editorial type. Its signature is a set of procedural 3D halftone sculptures made from thousands of dots, rendered in real time with WebGL. They aren’t videos or images."}]},{"type":"paragraph","content":[{"type":"text","text":"The hero sculpture rotates, tilts toward the cursor, pushes its dots away from the pointer and morphs between three forms when clicked. It can be drawn in five visual modes: halftone surface, wireframe + dots, particle geometry, dithered point cloud and dot matrix. Further down, a full-screen scroll scene assembles a sculpture from particles, expands it, morphs it and finally rearranges it into a clean lattice."}]},{"type":"paragraph","content":[{"type":"text","text":"What’s included","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"8 sections: hero, logo row, platform features, interactive product showcase, immersive 3D scroll scene, metrics with a live signal chart, developer section with a code editor, and a CTA footer with an interactive dot field"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Desktop, tablet and phone layouts, with a fullscreen mobile menu"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pinned scroll showcase: four workflow stages with animated connections and pixel-wipe transitions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Code editor with JavaScript, Python and CLI tabs, a typewriter effect, a copy button and a deploy status"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Live latency graph you can inspect with the mouse or the arrow keys"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Six animated feature illustrations, each with its own hover behaviour"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Footer dot field that ripples around the cursor and reveals a ghosted wordmark"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reusable components: Button (5 styles with hover states), Section Heading and Feature Card"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Color styles and text styles throughout (Geist and Geist Mono)"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Easy to customise","marks":[{"type":"bold"}]},{"type":"text","text":" Every visual effect is a code component with clear property controls. You can change the shapes, dot size, dot spacing, particle density, rotation speed, noise, hover wave, mouse strength, perspective and colors without touching code. Effects respect reduced-motion settings and pause when off screen."}]}]},"introduction":"Best AI Landing Page","slug":"ordoo","author":{"framerUserId":"ad8feb8e-f9b9-4619-9237-5bee96cbb732","name":"Lalit","slug":"madebylalit","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ad8feb8e-f9b9-4619-9237-5bee96cbb732/6e0k19fx","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/sHT3rrGSYwzfyx7d7ptXXCUCp4aEj02G02T6fosbPNUuI.m3u8","metadata":{"posterUrl":"https://image.mux.com/sHT3rrGSYwzfyx7d7ptXXCUCp4aEj02G02T6fosbPNUuI/thumbnail.webp?time=58.025","aspectRatio":"4:3","duration":80.046633}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ad8feb8e-f9b9-4619-9237-5bee96cbb732/01a14ecc-9627-76ce-950c-ea40eb15b4a1.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":3200,"height":1948}}],"post":null,"createdAt":"2026-10-18T11:37:49.596Z","updatedAt":"2026-10-18T11:37:49.596Z","publishedAt":"2026-10-18T11:37:49.592Z","featuredAt":null,"approvedAt":null,"type":"template","attributes":{"price":"49","paymentUrl":"https://buy.stripe.com/test_9B600l8qG4dw9FY9PS2VG00","remixUrl":null,"previewUrl":"https://nice-squash-242352.framer.app/","categories":[],"styles":[{"id":239,"name":"Monochromatic","slug":"monochromatic"},{"id":110,"name":"Animated","slug":"animated"},{"id":6,"name":"3D","slug":"3d"}],"mainCategory":{"id":26,"name":"AI","slug":"ai"},"features":[],"tags":[],"isAgentTemplate":false,"demoVideo":null,"skills":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-18T11:37:50.339Z","updatedAt":"2026-10-18T11:37:50.339Z","reported":false,"type":"post"}}],"$L58"]

Suggested for you