Dev

web/content/journal/experiment-after-experiment.en.mdx

@@ -0,0 +1,40 @@
+---
+title: "Experiment After Experiment"
+date: "2026-06-26T10:10:00+09:00"
+excerpt: "Improving little by little"
+draft: false
+---
+
+This entry, too, is just to share where things stand. The parts that come to mind right away are the enclosure 3D model, the PCB, and the pattern-generation system. Oh! I also shot a new demo video yesterday for the Crowd Supply pre-launch page. I set up a system for organizing progress into GitHub issues, too. I tidied up the Discord channels a bit and wired them to GitHub. Looking at it laid out like this, I really did do a lot this week. I wonder if it's possible because I'm pouring all day into Patternflow lately.
+
+## What I improved
+
+I knocked out, one by one, the things I'd only said I *would* do in the last entry.
+
+### The 3D model
+
+You can see the images at [GitHub Issue #113](https://github.com/engmung/Patternflow/issues/113). I keep revising and experimenting to get a clean, efficient print. I added snap-fits, and tried adding ribs too. Now I just have to solve the warping. With help from the Hongik makerspace, I'm printing it over and over on the H2S. It made me feel all over again how much having this kind of infrastructure nearby helps with prototyping.
+
+### The PCB
+
+In progress at [GitHub Issue #114](https://github.com/engmung/Patternflow/issues/114). I removed every SMD element from the PCB and left only THT. I ordered a small batch from JLCPCB, got it yesterday, and tested it. As expected, no problems. It really is clearly easier to build this way.
+
+### The pattern-generation system
+
+Usable at [Pattern Lab](https://patternflow.work/pattern-lab). Before, the flow was: go into a chat window like Gemini, drop in the pattern-generation prompt, copy the answer, and paste it into the Patternflow web. A very tedious process, with a lot of unnecessary, automatable steps. So I ran a simple PoC using the Gemini API. It's something I'd been thinking I should do for a long time. Now you put in an API key, hit generate, and several pattern drafts come out right away. Much more convenient. That said, even with Flash 3.5, doing it a few times burns through about 4,000 won in a single day. So I think I have to go the route of using free models as much as possible.
+
+The quality isn't that great, either. It clearly compares unfavorably to doing it in the Gemini chat window. That's probably largely because I handed the LLM too many tasks at once. From my experience having various AIs do this, it doesn't need high intelligence. A lighter model often makes them better, in fact, which is why I'd kept making them on Flash 3.5 at the standard setting. I think a multi-agent system would solve this. The key is to build an environment where the model doing the creative work can focus purely on the creative work, with no constraints. Well, let me do that slowly, later.
+
+### Everything else
+
+I added emoji to the Discord channel names. I built a system for the GitHub issues and made a project. I made a GitHub Action and wired it to a Discord bot so the dev log gets generated automatically. Yesterday I shot a horizontal-format video at a photo studio for Crowd Supply. It came out pretty, which felt good. I also experimented with building a Patternflow using only a breadboard and jumper wires, no PCB, and it worked, which felt good. I need to make the materials and documentation so people can build it more easily.
+
+## What failed
+
+A lot. For one, the fact that I'm still improving and experimenting on the enclosure means everything along the way is a failure. When you find out that the mechanisms you agonized over for a long time actually have no effect, the letdown of it not matching what you hoped is pretty big. With laser cutting, too, I'd prepped the file in the past and only got around to testing it some two weeks later, and it failed because I mistakenly used different dimensions. What I learned here is: don't put things off. If you're going to put it off, put it off completely; when something half-finished gets interrupted mid-way, you make mistakes.
+
+And I consider the community, as a whole right now, a failure too. Among the people who joined the Discord, the number who are active is strikingly small. I really hate seeing it. I want to make it lively. I plan to add mechanisms for that later. Like, to see others' patterns you have to post your own every few days and react to other people's. That kind of minimal mechanism is needed. I won't charge money, though.
+
+The last one is less a failure than a question I haven't answered yet. For this PCB test I ordered from a company other than PCBway, and the price difference was large. As for shipping and quality, honestly, I can't tell the difference. The Patternflow PCB isn't a form that needs difficult technology to begin with. For that reason, my certainty that I'd hand PCB, 3D printing, and packaging all to PCBway has started to crack. For now I'll get every quote. I'm not planning to make much money off the funding anyway, but lowering the unit cost is the only way to lower the product price, so that seems right.
+
+No, honestly, I don't know. PCBway gave me sponsorship first and helped a lot, so I wonder if it isn't the decent thing to do. And I like PCBway's maker-friendly image. A bit expensive, but it feels like a company that's maker-friendly and leads that kind of culture. Maybe it fits Patternflow really well. Ah, I don't know. Let me take it slow going forward. This one I'll just have to talk through directly.

web/content/journal/experiment-after-experiment.mdx

@@ -0,0 +1,40 @@
+---
+title: "실험 또 실험"
+date: "2026-06-26T10:10:00+09:00"
+excerpt: "조금씩 개선하기"
+draft: false
+---
+
+이번 글도 간단히 진행 상황을 공유하고자 한다. 당장 떠오르는 부분은 인클로저 3D 모델 개선, PCB 개선, 패턴 생성 시스템 개선이다. 아! 크라우드 서플라이 프리런칭 페이지에 들어갈 작동 영상도 어제 새로 찍었다. 진행 상황을 깃허브 이슈에 정리하기 위해 체계를 잡기도 했다. 디스코드 채널들도 조금 손봤고, 깃허브와 연동시키기도 했다. 이렇게 보니 이번 주 동안 정말 많이 하긴 했네. 요즘 하루 종일 패턴플로우에 시간을 쏟아서 가능한가 싶다.
+
+## 개선한 부분들
+
+지난 글에서 하겠다고 예고만 해 둔 것들을 하나씩 해치웠다.
+
+### 3D 모델
+
+이미지는 [GitHub Issue #113](https://github.com/engmung/Patternflow/issues/113)에서 확인 가능하다. 효율적으로 깔끔한 프린팅 결과를 만들기 위해 계속 수정하고 실험 중이다. 스냅핏도 추가하고, 리브도 추가해 보았다. 이제 워핑 문제만 해결하면 된다. 홍익대학교 메이커스페이스의 도움을 받아 H2S로 계속 뽑아보는 중이다. 주변에 이런 인프라가 있다는 것이 프로토타이핑에 얼마나 큰 도움이 되는지 새삼 느껴지더라.
+
+### PCB
+
+[GitHub Issue #114](https://github.com/engmung/Patternflow/issues/114)에서 진행 중이다. PCB에서 SMD 요소를 전부 없애고 THT만 남겼다. JLCPCB에 소량으로 주문했고, 어제 받아서 테스트했다. 당연하게도 문제가 없다. 이러니까 만들기 확실히 편하더라.
+
+### 패턴 생성 시스템
+
+[Pattern Lab](https://patternflow.work/pattern-lab)에서 사용 가능하다. 기존에는 Gemini 같은 채팅창에 들어가 패턴 생성 프롬프트를 넣고, 답변을 복사해 패턴플로우 웹에 붙여넣는 식이었다. 매우 귀찮은 과정이고, 불필요하고 자동화 가능한 과정이 많다. 그래서 Gemini API를 활용해 간단한 PoC를 진행했다. 예전부터 계속 해야 한다고 생각했던 부분이긴 하다. 이제 API 키를 넣고 생성 버튼을 누르면 바로 여러 패턴 시안이 나온다. 훨씬 편리하다. 다만 Flash 3.5로 했을 때조차 몇 번 하다 보면 하루 만에 금방 4천 원 정도가 나가더라. 그래서 최대한 무료 모델을 활용하는 방안으로 가야 할 것 같다.
+
+또 퀄리티가 그리 좋지는 않다. Gemini 채팅창에서 할 때와 확실히 비교된다. 아마 이는 LLM에게 줘야 하는 임무를 너무 많이 준 탓이 클 것이다. 지금까지 여러 AI한테 시켜본 경험으로 보았을 땐, 뛰어난 지능이 필요하지는 않다. 오히려 더 가벼운 모델이 잘 만들기도 하고, 그래서 계속 Flash 3.5 모델 standard 설정으로 만들었었다. 이는 멀티 에이전트 시스템으로 만들면 해결 가능하리라 본다. 핵심은, 창의적인 작업을 진행하는 모델은 아무런 제약 없이 정말 창의적인 작업에만 몰두할 수 있는 환경을 만드는 거다. 뭐, 나중에 천천히 하자.
+
+### 그 외의 것들
+
+디스코드 채널들의 이름에 이모티콘을 추가했다. 깃허브 이슈도 체계를 만들고 프로젝트를 만들었다. 깃허브 액션을 만들고 디스코드 봇과 연동하여 개발 로그가 자동으로 생성되게 했다. 어제는 포토 스튜디오에서 크라우드 서플라이에 올라갈 가로 버전 영상을 찍기도 했다. 예쁘게 나와서 기분이 좋다. PCB 없이 빵판과 점퍼선만으로 패턴플로우를 만들어보는 실험도 했는데, 잘 작동해서 기분이 좋았다. 더 편리하게 만들 수 있도록 자료와 문서를 만들어야 한다.
+
+## 실패한 부분들
+
+아주 많다. 일단 인클로저를 계속해서 개선하고 실험하고 있다는 건, 그 과정에 있는 모든 것이 실패라는 뜻이다. 오랫동안 고민해서 고안한 장치들이 사실 아무런 효과도 없다는 걸 알았을 때, 기대한 바와 다를 때 오는 실망감이 꽤 크다. 레이저 커팅도 과거에 파일을 준비해 두고 2주 정도 만에 테스트해 보았는데, 실수로 크기를 다르게 해서 실패했다. 여기서 배운 건 미루지 말자는 거. 미룰 거면 아예 미루든가, 어중간한 게 중간에 끊기면 실수한다.
+
+그리고 커뮤니티도 지금 전체적으로 실패라고 본다. 디스코드에 들어온 사람들 중 활동하는 인원이 현저히 적다. 매우 보기 싫다. 활발하게 만들고 싶다. 이를 위한 장치들을 추후에 추가할 생각이다. 다른 사람의 패턴을 보려면 며칠마다 자신의 패턴을 올리고 다른 사람들의 패턴에 반응을 해준다거나. 그런 최소한의 장치가 필요하다. 다만 돈은 받지 않을 거다.
+
+마지막은 실패라기보단, 아직 답을 못 내린 고민이다. 이번에 PCB 테스트를 위해 PCBway가 아닌 다른 회사에 주문을 해 보았는데, 가격 차이가 많이 나더라. 배송도 품질도 솔직히 차이를 모르겠다. 애초에 패턴플로우 PCB가 어려운 기술이 필요한 형태가 아니다. 이런 이유로, 무조건 PCBway에 PCB, 3D 프린팅, 포장을 전부 맡길 거란 확신에 금이 가기 시작했다. 일단 견적은 전부 받아볼 예정이다. 어차피 펀딩으로 돈을 많이 벌 생각은 없지만, 원가를 줄여야 상품 가격도 줄일 수 있으니 그게 맞을 것 같다.
+
+아니 솔직히 잘 모르겠다. PCBway에서 먼저 스폰서십도 해주고 많이 도와줬는데, 도리가 아니지 않나 싶기도 하다. 또 PCBway의 메이커 친화적인 그런 이미지가 좋기도 하다. 조금 비싸지만 메이커 친화적이고 그런 문화를 선도하는 기업이라고 느껴진다. 어쩌면 패턴플로우랑 아주 잘 맞다. 아 모르겠다. 앞으로 천천히 해보도록 하자. 이건 뭐 직접 이야기해 봐야지.

web/src/components/journal/JournalIndex.tsx

@@ -8,7 +8,7 @@
   lang: JournalLang;
 };
 
-const featuredSlug = "refocus";
+const featuredSlug = "experiment-after-experiment";
 
 export default function JournalIndex({ posts, lang }: JournalIndexProps) {
   const hero = posts.find((post) => post.slug === featuredSlug) ?? posts[0];
@@ -67,7 +67,7 @@
           <>
             <div className="journal-archive-label">Archive</div>
             <ol className="journal-post-list">
               {archive.map((post, index) => (
                 <li key={post.slug}>
                   <Link
                     className={`pf-row${isAnchorPost(post.slug) ? " journal-anchor-post" : ""}`}

web/src/components/sections/Hero.tsx

@@ -1,9 +1,29 @@
 'use client';
 
+import { useState, useEffect } from 'react';
 import HeroJournalLink from "@/components/journal/HeroJournalLink";
 import { captureEvent } from "@/lib/posthogEvents";
 
 export default function Hero() {
+  const [isVideoVisible, setIsVideoVisible] = useState(false);
+
+  useEffect(() => {
+    // Show the video after 3 seconds (allowing it to initialize and hide controls)
+    const showTimer = setTimeout(() => {
+      setIsVideoVisible(true);
+    }, 3000);
+
+    // Hide the video and return to static image after the video ends (3s delay + 89s video duration = 92s)
+    const hideTimer = setTimeout(() => {
+      setIsVideoVisible(false);
+    }, 92000);
+
+    return () => {
+      clearTimeout(showTimer);
+      clearTimeout(hideTimer);
+    };
+  }, []);
+
   return (
     <section className="hero">
       <HeroJournalLink />
@@ -12,11 +32,45 @@
           <em className="wordmark">Patternflow</em>
         </h1>
         <div className="kicker" style={{ marginBottom: '24px' }}>An open-source LED synthesizer played with the fingertips.</div>
-        <div style={{ marginBottom: '24px', overflow: 'hidden', border: '1px solid var(--pf-rule)' }}>
+        <div style={{ 
+          marginBottom: '24px', 
+          overflow: 'hidden', 
+          border: '1px solid var(--pf-rule)',
+          position: 'relative',
+          paddingBottom: '56.25%',
+          height: 0
+        }}>
+          {/* Static fallback and loading placeholder */}
           <img 
             src="/product_v2.jpg" 
             alt="Patternflow physical device" 
-            style={{ width: '100%', height: 'auto', display: 'block' }} 
+            style={{ 
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover',
+              display: 'block' 
+            }} 
+          />
+          <iframe 
+            src="https://www.youtube.com/embed/OXt-yg_7qdk?autoplay=1&mute=1&controls=0&modestbranding=1&disablekb=1&playsinline=1&rel=0" 
+            title="Patternflow Demo Video"
+            frameBorder="0" 
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+            allowFullScreen
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              display: 'block',
+              pointerEvents: 'none',
+              opacity: isVideoVisible ? 1 : 0,
+              transition: 'opacity 0.6s ease-in-out',
+            }}
           />
         </div>
         <p className="lede">