<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: TattooTryOn</title>
    <description>The latest articles on DEV Community by TattooTryOn (@tattootryon).</description>
    <link>https://dev.to/tattootryon</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4057644%2Fdd4998d5-2e31-4cd8-80d7-4a9e98b83137.png</url>
      <title>DEV Community: TattooTryOn</title>
      <link>https://dev.to/tattootryon</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/tattootryon"/>
    <language>en</language>
    <item>
      <title>Google found my side page before my main feature</title>
      <dc:creator>TattooTryOn</dc:creator>
      <pubDate>Mon, 19 Oct 2026 03:40:26 +0000</pubDate>
      <link>https://dev.to/tattootryon/google-found-my-side-page-before-my-main-feature-40fb</link>
      <guid>https://dev.to/tattootryon/google-found-my-side-page-before-my-main-feature-40fb</guid>
      <description>&lt;p&gt;I launched &lt;a href="https://tattootryon.app" rel="noopener noreferrer"&gt;TattooTryOn&lt;/a&gt; a few days ago. You upload a photo of your arm or leg, drop a design on it, place it yourself, and an AI model turns the flat artwork into something that looks like actual ink in skin. That's the product. That's the thing I spent most of my time on.&lt;/p&gt;

&lt;p&gt;Google doesn't care.&lt;/p&gt;

&lt;p&gt;This morning (Oct 19), Search Console showed the site's first impressions. Two queries: "tattoo design font generator" and "tattoo text font generator". Average position 24.8, so page three, nobody clicking. Still, it's the first signal I've had from search, and it points at the &lt;a href="https://tattootryon.app/tattoo-font-generator" rel="noopener noreferrer"&gt;tattoo font generator&lt;/a&gt;, a side page I built almost as an afterthought. Nothing about the try-on.&lt;/p&gt;

&lt;p&gt;I find this a little funny and a little annoying.&lt;/p&gt;

&lt;h2&gt;
  
  
  The numbers so far
&lt;/h2&gt;

&lt;p&gt;Plausible says that through Oct 18 the site had 13 unique visitors and 100 pageviews. Tiny. But the average visit was close to 11 minutes, which I didn't expect for a tool you could, in theory, use in one go.&lt;/p&gt;

&lt;p&gt;Where they came from: 7 direct, 6 from V2EX, 1 from Google. One V2EX post brought in about 40% of the visits. Visitors came from the US, China, Japan, and Thailand, which is a wider spread than 13 people should honestly produce.&lt;/p&gt;

&lt;p&gt;I'm not going to pretend these numbers mean much. They don't. But writing them down is useful, because in a month I'll want to know where I started.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why the font page might be the easier one to rank
&lt;/h2&gt;

&lt;p&gt;Thinking about it for more than five minutes, it makes sense.&lt;/p&gt;

&lt;p&gt;A query like "tattoo text font generator" describes exactly what the page does. Type some text, see it in a bunch of fonts, download a transparent PNG. The search intent and the page line up one-to-one. There's no explaining needed.&lt;/p&gt;

&lt;p&gt;"AI tattoo try-on" is a newer kind of thing. People search for it, but they phrase it a dozen different ways ("see tattoo on my arm", "tattoo preview app", "how would a tattoo look on me"), and the page has to convince you before it's useful. That's harder for a brand-new domain to win.&lt;/p&gt;

&lt;p&gt;Also, the font page is just text and fonts. No model, no credits, no waiting. It works the instant it loads, which probably doesn't hurt.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why it has no AI in it
&lt;/h2&gt;

&lt;p&gt;This is the part I actually care about from a dev point of view.&lt;/p&gt;

&lt;p&gt;Lettering is where image models are weakest. Ask one to render a name and you'll get letters that look plausible and are sometimes wrong. For a tattoo, one wrong letter is the whole problem. So the font generator just renders real font files on a canvas. A font file doesn't hallucinate.&lt;/p&gt;

&lt;p&gt;The try-on side is built around the same idea of not letting the model decide things it shouldn't. Placement happens in the browser by hand, before any model runs. The editor keeps a center point (normalized to the photo, so it survives resizing), a scale, and an angle. Before calling the renderer, those get baked into pixels. The model gets two pixel-aligned images: the original photo, and a composite with the design drawn onto it.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// simplified&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;bake&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;photo&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;design&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;cx&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;cy&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;scale&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;angle&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;c&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;OffscreenCanvas&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;photo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;photo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;height&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;ctx&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;c&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getContext&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;2d&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nx"&gt;ctx&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;drawImage&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;photo&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nx"&gt;ctx&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;translate&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cx&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;photo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;cy&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;photo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;height&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nx"&gt;ctx&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;rotate&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;angle&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nx"&gt;ctx&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;scale&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;scale&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;scale&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nx"&gt;ctx&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;globalCompositeOperation&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;multiply&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nx"&gt;ctx&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;drawImage&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;design&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;design&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;design&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;height&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;c&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The composite uses multiply blending, so ink can only darken skin, never lighten it. Skin texture shows through, and the preview you see in the editor looks the same as what gets sent to the model. There's also a body segmentation step that cuts the design out wherever it lands on clothes, hair or jewelry, so the model doesn't paint a tattoo onto your sleeve.&lt;/p&gt;

&lt;p&gt;Placement is free, too. You can move things around as long as you want and nothing is generated until you press the button. Maybe that's where some of those 11 minutes go. I don't know yet.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I'm doing with this
&lt;/h2&gt;

&lt;p&gt;Not much, honestly, other than paying attention. I'm not going to rebuild the homepage around fonts because of two queries at position 24.8. But it's a reminder that the simple, boring, clearly named page is often the one search engines understand first, and I should probably write landing pages for the try-on that describe it in plain words people actually type.&lt;/p&gt;

&lt;p&gt;And I should post on V2EX again, apparently.&lt;/p&gt;

&lt;p&gt;If you've launched something where the side tool got noticed before the main product, I'm curious whether you leaned into it or ignored it.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>showdev</category>
      <category>buildinpublic</category>
    </item>
  </channel>
</rss>
