[{"data":1,"prerenderedAt":196},["ShallowReactive",2],{"work-cytron-motorcycles":3,"work-siblings-cytron-motorcycles":158},{"id":4,"title":5,"accent":6,"body":7,"completedAt":135,"cover":136,"coverAlt":137,"description":13,"extension":138,"external":139,"liveUrl":140,"meta":141,"navigation":142,"order":143,"path":144,"role":145,"seo":146,"stack":147,"status":153,"stem":154,"summary":155,"year":156,"__hash__":157},"work\u002Fwork\u002Fcytron-motorcycles.md","Cytron Motorcycles","#a21caf",{"type":8,"value":9,"toc":125},"minimark",[10,14,19,22,25,44,53,57,60,68,75,79,82,85,88,94,98,101,104,110,118,122],[11,12,13],"p",{},"Cytron builds custom streetfighters out of a workshop in Taito City, and every word of that\nsentence is invented. The brand has no factory and no catalogue. What it has is a range of ten\nbikes, a header in six languages, an enquiry form that reaches somebody, and a homepage that now\nruns in a browser rather than inside a prototyping tool.",[15,16,18],"h2",{"id":17},"the-problem-underneath-the-brief","The problem underneath the brief",[11,20,21],{},"A concept brand is the easiest thing in the world to design badly, because nothing pushes back.\nThere is no client to say the bikes do not look like that, no CMS to say the copy will not fit,\nand no engineer to ask what happens on hover. The work either invents its own resistance or it\nproduces a very pretty picture of a website that could not be built.",[11,23,24],{},"So the constraint I set before drawing anything was that the file had to behave like a prototype,\nand that whatever the prototype claimed had to survive being built. Every state a visitor could\nreach existed first as a real variant and later as a real component, and nothing was allowed to\nstay a note in the margin about what would happen if you moused over the card.",[26,27,28,34,39],"metric-row",{},[29,30],"metric",{"label":31,"note":32,"value":33},"Models in the range","CT-1 holds the hero. CT-2 through CT-10 fill the grid underneath it.","10",[29,35],{"label":36,"note":37,"value":38},"Components with a second state","Every card, nav item, button, and scroll cue drawn twice, so every state was real before it was built.","16",[29,40],{"label":41,"note":42,"value":43},"Languages in the header","English plus five more, each named in its own language, with a currency switch beside them.","6",[45,46],"reel",{"alt":47,"caption":48,"poster":49,"ratio":50,"src":51,"webm":52},"The Cytron hero cycling through its hover states: the nav items, the language menu opening, the enquiry arrow turning from diagonal to horizontal, and the chat bubble opening into a Let us talk label.","Twenty seconds of the hero doing nothing but change state. The language menu opens about a third of the way in, which is where both of the words the design file could never catch are sitting in plain view.","\u002Fwork\u002Fcytron-motorcycles\u002Freel-poster.png","4 \u002F 3","\u002Fwork\u002Fcytron-motorcycles\u002Freel.mp4","\u002Fwork\u002Fcytron-motorcycles\u002Freel.webm",[15,54,56],{"id":55},"why-sveltekit-and-not-the-usual-thing","Why SvelteKit and not the usual thing",[11,58,59],{},"Almost everything else I ship is React on Next.js, and reaching for it again would have answered\na question I had already answered several times. Cytron is a page whose entire argument is\nmotion. A card has to grow without shoving its neighbours, a lime wireframe line has to run the\nlength of the document without tearing, and the whole thing has to hold its frame rate on a mid\nrange phone. That is a budget problem before it is a component problem.",[11,61,62,63,67],{},"Svelte compiles its components away, so what ships is the work the page does rather than a\nruntime plus the work the page does. Svelte 5 runes hold the hover and variant state, form\nactions in ",[64,65,66],"code",{},"+page.server.ts"," take the enquiry without an API route sitting in front of them, and\nGSAP ScrollTrigger drives the single continuous vector that crosses every section. The six\nlocales come out of Paraglide, which compiles messages the same way Svelte compiles components,\nso a language nobody picked costs the visitor nothing at all.",[69,70],"shot",{"alt":71,"caption":72,"ratio":73,"src":74},"The Cytron models grid, nine motorcycles in three rows of three, each labelled CT-2 through CT-10 in lime monospace.","Nine bikes, one card component, nine instances. The label under each one is the only thing that differs, which is what makes the grid a system rather than nine separate drawings.","1440 \u002F 1180","\u002Fwork\u002Fcytron-motorcycles\u002Fshot-models.png",[15,76,78],{"id":77},"drawn-as-a-prototype-then-built-as-one","Drawn as a prototype, then built as one",[11,80,81],{},"The model card is where the discipline paid for itself twice. In the file its default is 360 by\n248 and its hover is 400 by 275, drawn side by side in a component set rather than described in a\ncomment. In the build that pair collapses to one component and one scale transform, because the\ntwo frames share a ratio and the design meant a bigger painting rather than a bigger box.",[11,83,84],{},"The enquiry button does the same thing, and its hover does something specific. The arrow rotates\nfrom a diagonal to a horizontal, a forty five degree turn that only becomes a decision once\nsomebody has drawn both frames. A sticky note parked beside the button on the canvas says people\nare more likely to click a button that has an arrow on it, which stayed true once the button was\na real button that real hands could reach.",[11,86,87],{},"The six feature icons are held together by the same habit. A second note on the canvas set the\nrule that they match in complexity and in whether they are stroked or filled, and that each one\nis named for what it is used for rather than for what it draws. Six icons is exactly the number\nwhere that rule stops being obvious and starts being necessary, and it is the reason they left\nthe file as one sprite rather than six separate arguments.",[69,89],{"alt":90,"caption":91,"ratio":92,"src":93},"Two alternating story blocks on the Cytron page, a night rider photograph beside body copy and an engine cutout beside more copy, with thin lime wireframe lines crossing the black background.","The thin lime lines running behind everything are one continuous vector spanning the whole page, so the sections read as cuts through a single object rather than a stack of separate bands.","1440 \u002F 1300","\u002Fwork\u002Fcytron-motorcycles\u002Fshot-story.png",[15,95,97],{"id":96},"what-the-build-caught-and-the-file-could-not","What the build caught and the file could not",[11,99,100],{},"A design file cannot tell you that you got a word wrong. The language menu lists its options in\ntheir own languages, which is the right instinct and the reason the pattern works at all, and the\ndrawn version then got two of the six wrong in the same breath. French is written francés, which\nis the Spanish word for it, and Chinese is written 中国人, which names a person rather than a\nlanguage. Nothing inside Figma can raise its hand about either. A locale file can, and did: the\nkeys were right and two of the strings were not, and neither survived being typed into a\ncatalogue where every language has to sit in the same column.",[11,102,103],{},"The same gap showed up in the feature copy, where three of the six descriptions were still lorem\nipsum, and in the testimonial, where the quote was the words \"It was a very good experience\"\nattributed to Dave. In a picture of a website those read as finished. In a built one they are the\nfirst thing a content pass deletes, and that is exactly what happened to them.",[69,105],{"alt":106,"caption":107,"ratio":108,"src":109},"The Cytron contact section, with a dark map of Taito City pinned in lime beside a four field enquiry form and a lime send button.","The map is styled down to two greys so the lime pin is the only saturated thing in the frame, and the form is four underlines rather than four heavy boxes.","1440 \u002F 1040","\u002Fwork\u002Fcytron-motorcycles\u002Fshot-contact.png",[111,112,115],"callout",{"title":113,"tone":114},"A prototype is an argument you can lose","accent",[11,116,117],{},"Drawing both states of sixteen components takes longer than drawing one state of sixteen\ncomponents, and the payment for it arrives later, when somebody sits down to build the thing and\nthe file answers the question instead of shrugging at it. A picture of a website can only ever\nagree with you.",[15,119,121],{"id":120},"what-i-would-keep","What I would keep",[11,123,124],{},"The rule that a state has to exist before it can be claimed. It is the same rule I would apply to\na component library, and applying it inside a design file is what stopped that file from being a\nmood board with a nav bar on top. It is also what made the build short. Ten bikes, six languages,\nand one continuous lime line took less time to write than the file took to draw, because every\nquestion the code was going to ask had already been settled on the canvas.",{"title":126,"searchDepth":127,"depth":128,"links":129},"",2,3,[130,131,132,133,134],{"id":17,"depth":127,"text":18},{"id":55,"depth":127,"text":56},{"id":77,"depth":127,"text":78},{"id":96,"depth":127,"text":97},{"id":120,"depth":127,"text":121},"2026-09","\u002Fwork\u002Fcytron-motorcycles\u002Fcover.png","The Cytron home page hero, showing the CT-1 motorcycle lit magenta and orange in a graffitied garage beneath a lime wordmark and a three item nav.","md",null,"https:\u002F\u002Fcytron-kohl.vercel.app",{},true,10,"\u002Fwork\u002Fcytron-motorcycles","Design and build, end to end",{"title":5,"description":13},[148,149,150,151,152],"SvelteKit 2","Svelte 5","GSAP ScrollTrigger","Paraglide","Vercel","completed","work\u002Fcytron-motorcycles","A Tokyo motorcycle brand invented end to end, drawn as a working prototype and then built as the site that prototype had been arguing for.",2026,"phdxjplfQEkPk-rCmyb1L3MtgKgY3lSH9wVuWP69KEI",[159,163,167,171,175,179,183,187,191,195],{"path":160,"title":161,"summary":162},"\u002Fwork\u002Fwayta-peru","Wayta Perú","A bilingual travel operator site where the marketing page, the blog, and the studio the client edits in are one deployment.",{"path":164,"title":165,"summary":166},"\u002Fwork\u002Fpersonae","Personae","A persona library built on IBM Carbon, where every profile links out to its research and every reader can flag a claim that no longer holds.",{"path":168,"title":169,"summary":170},"\u002Fwork\u002Farsonistai","ArsonistAI","An AI design consultancy with two audiences on one homepage, enterprises hiring for AI augmented product work, and individual designers buying tools off the shelf.",{"path":172,"title":173,"summary":174},"\u002Fwork\u002Fhcit","HCIT","A five vertical AI and infrastructure integrator whose site had to make enterprise grade credibility legible without turning into an alphabet soup of sub brands.",{"path":176,"title":177,"summary":178},"\u002Fwork\u002Flynne","Lynne","A lead capture first booking site for a solo telehealth counseling practice, sized to get one action in front of a visitor rather than a full site's worth of pages.",{"path":180,"title":181,"summary":182},"\u002Fwork\u002Fn-hub","N Brand Portal","An internal brand portal holding the logos, color tokens, and templates a small team actually needs, so the approved asset stops living in an eight month old Slack thread.",{"path":184,"title":185,"summary":186},"\u002Fwork\u002Freductivist","Reductivist","A minimalist goods brand selling a handful of well made objects, where the real commerce problem was resisting the urge to add a fourth product to the homepage.",{"path":188,"title":189,"summary":190},"\u002Fwork\u002Fpattern-library","Pattern Library","Four hundred and twenty two documented interaction patterns across web, mobile, and cross platform concerns, with the rationale that makes each one work.",{"path":192,"title":193,"summary":194},"\u002Fwork\u002Fflow-society-mx","Flow Society MX","An e-bike tour operator in Jalisco, with a six step booking flow, a per departure availability calendar, and an operator dashboard behind it.",{"path":144,"title":5,"summary":155},1789230933997]