5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T7e0,

KON is an eight-page editorial Framer template for designers and studios building a Japanese site for a client.

One idea runs the whole site. As you scroll, the background deepens through six shades of indigo, from undyed kinari to deep navy, the way cloth gains color in the vat. A dip counter keeps the count.

Work this fits

The skeleton underneath isn't specific to dyeing. A scroll that shifts stage by stage, four objects with their own pages, a three-entry journal, About, and Contact. A ceramics or lacquer studio swaps the dip count for a firing count. A food producer that sells process (miso, soy sauce, sake) turns the scroll into months of fermentation.

Eight pages, one vat

The dye-scroll runs the full length of the home page. Products is a grid of four objects, and each opens onto its own page with an immersion count, a price, and a link back. Journal holds three dated entries. Then About, Contact, and a 404 page.

How editing works

The home page is built from native Framer layers, so every section, text block, and image edits on the canvas. The scroll effects run on overrides you attach or remove per layer, so the dye effect is yours to keep or drop. The six inner pages are one React code component, and its panel only switches pages. Their text, prices, dates, and image URLs live in the code. Nav and footer changes happen twice, on the canvas and in code. Contact shows an email link until you add your own form endpoint (Formspree or similar). Fonts are Cormorant Garamond, Inter, and Shippori Mincho, all Google Fonts.

Who this is for

Designers and studios who would rather not start from scratch on every craft client, and freelancers who want a concept ready for the next pitch.

KON is designed in Japan by a one-person studio. The vertical kanji and the color names follow how they're actually used here. Checkout includes a 30-day refund.

5a:[["$","$L5d",null,{"post":{"id":"019f8948-846c-701f-89ff-796f3dd5bee1","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"d5289951-2842-47a5-8351-750c1fdc0cd6","name":"swec flow","slug":"swec-flow","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"69957","resolved":true,"title":"KON Indigo Atelier","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"KON is an eight-page editorial Framer template for designers and studios building a Japanese site for a client."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"One idea runs the whole site. As you scroll, the background deepens through six shades of indigo, from undyed kinari to deep navy, the way cloth gains color in the vat. A dip counter keeps the count."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Work this fits"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"The skeleton underneath isn't specific to dyeing. A scroll that shifts stage by stage, four objects with their own pages, a three-entry journal, About, and Contact. A ceramics or lacquer studio swaps the dip count for a firing count. A food producer that sells process (miso, soy sauce, sake) turns the scroll into months of fermentation."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Eight pages, one vat"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"The dye-scroll runs the full length of the home page. Products is a grid of four objects, and each opens onto its own page with an immersion count, a price, and a link back. Journal holds three dated entries. Then About, Contact, and a 404 page."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"How editing works"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"The home page is built from native Framer layers, so every section, text block, and image edits on the canvas. The scroll effects run on overrides you attach or remove per layer, so the dye effect is yours to keep or drop. The six inner pages are one React code component, and its panel only switches pages. Their text, prices, dates, and image URLs live in the code. Nav and footer changes happen twice, on the canvas and in code. Contact shows an email link until you add your own form endpoint (Formspree or similar). Fonts are Cormorant Garamond, Inter, and Shippori Mincho, all Google Fonts."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Who this is for"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Designers and studios who would rather not start from scratch on every craft client, and freelancers who want a concept ready for the next pitch."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"KON is designed in Japan by a one-person studio. The vertical kanji and the color names follow how they're actually used here. Checkout includes a 30-day refund."}]}]},"introduction":"Japanese aizome craft studio","slug":"kon-indigo-atelier","author":{"framerUserId":"d5289951-2842-47a5-8351-750c1fdc0cd6","name":"swec flow","slug":"swec-flow","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d5289951-2842-47a5-8351-750c1fdc0cd6/01a06c72-bbd1-7601-bd70-de6085bced85.png","metadata":{"tint":{"h":60,"s":53,"l":39},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d5289951-2842-47a5-8351-750c1fdc0cd6/01a06c72-c915-71b2-ab6f-5f0366744c0e.png","metadata":{"tint":{"h":60,"s":53,"l":39},"width":1440,"height":900}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d5289951-2842-47a5-8351-750c1fdc0cd6/01a06c72-d6bc-76f0-82da-f8cc6bc61fd0.png","metadata":{"tint":{"h":204,"s":36,"l":22},"width":1440,"height":900}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d5289951-2842-47a5-8351-750c1fdc0cd6/01a06c72-e491-753b-85a4-50c5594d9b2e.png","metadata":{"tint":{"h":210,"s":44,"l":14},"width":1440,"height":900}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d5289951-2842-47a5-8351-750c1fdc0cd6/01a06c72-f359-7148-945d-8361f5b0d9ea.png","metadata":{"tint":{"h":60,"s":53,"l":39},"width":390,"height":844}}],"post":null,"createdAt":"2026-07-22T10:04:18.375Z","updatedAt":"2026-09-17T03:41:12.301Z","publishedAt":"2026-07-22T10:04:18.370Z","featuredAt":null,"approvedAt":null,"type":"template","attributes":{"price":"79","paymentUrl":"https://flowtide10.gumroad.com/l/kon?utm_source=framer&utm_medium=marketplace&utm_campaign=shelf","remixUrl":null,"previewUrl":"https://kon-aizome.framer.website/","categories":[{"id":190,"name":"Arts & Crafts","slug":"arts-and-crafts"},{"id":14,"name":"Landing Page","slug":"landing-page"},{"id":11,"name":"Ecommerce","slug":"ecommerce"}],"styles":[{"id":110,"name":"Animated","slug":"animated"},{"id":111,"name":"Minimal","slug":"minimal"}],"mainCategory":{"id":11,"name":"Ecommerce","slug":"ecommerce"},"features":[{"id":18,"name":"Scroll Effects","slug":"scroll-effects"},{"id":37,"name":"Code Components","slug":"code-components"}],"tags":[],"isAgentTemplate":false,"demoVideo":null,"skills":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-22T10:04:18.924Z","updatedAt":"2026-07-22T10:04:18.924Z","reported":false}}],"$L5f"]

Suggested for you