diff --git a/package.json b/package.json
index 05c0871..541bb2a 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
+    "rough-notation": "^0.5.1",
     "typescript": "^5.4.5"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2c011c1..dff4501 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ dependencies:
   react-icons:
     specifier: ^5.2.1
     version: 5.2.1(react@18.3.1)
+  rough-notation:
+    specifier: ^0.5.1
+    version: 0.5.1
   typescript:
     specifier: ^5.4.5
     version: 5.4.5
@@ -4633,6 +4636,10 @@ packages:
       fsevents: 2.3.3
     dev: false
 
+  /rough-notation@0.5.1:
+    resolution: {integrity: sha512-ITHofTzm13cWFVfoGsh/4c/k2Mg8geKgBCwex71UZLnNuw403tCRjYPQ68jSAd37DMbZIePXPjDgY0XdZi9HPw==}
+    dev: false
+
   /run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
     dependencies:
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 3c9335c..69f9ab9 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -3,8 +3,6 @@ import "../styles/reset.css";
 import "../styles/theme.css";
 import "../styles/base.css";
 
-import { ViewTransitions } from "astro:transitions";
-
 export interface Props {
   title: string;
   description: string;
@@ -42,7 +40,6 @@ const pageTitle = Astro.url.pathname === "/" ? title : `${title} · Namesake`;
     <link rel="manifest" href="/manifest.json" />
     <link rel="sitemap" href="/sitemap-index.xml" />
     <title>{pageTitle}</title>
-    <ViewTransitions />
   </head>
   <body>
     <slot />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 454ff65..04030f6 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -20,7 +20,7 @@ import Footer from "../components/Footer.astro";
       densities={[1, 2]}
     />
     <div class="content">
-      <h1>Be seen for who you&nbsp;are.</h1>
+      <h1>Be seen for <span class="who-you-are">who you are.</span></h1>
       <div class="subhead">
         <p>
           <strong>Legally changing name and gender is a challenge.</strong> You have
@@ -40,8 +40,9 @@ import Footer from "../components/Footer.astro";
           Summer, starting in Massachusetts.
         </p>
         <p>
-          Rigid systems weren’t built for us, but we’ll figure them out
-          together.
+          Rigid systems weren’t built for us, but <span class="figure-it-out"
+            >we’ll figure them out together.</span
+          >
         </p>
       </div>
       <form>
@@ -56,6 +57,31 @@ import Footer from "../components/Footer.astro";
   <Footer />
 </BaseLayout>
 
+<script>
+  import { annotate } from "rough-notation";
+
+  const whoYouAre: HTMLElement | null = document.querySelector(".who-you-are");
+  if (whoYouAre) {
+    const highlight = annotate(whoYouAre, {
+      type: "highlight",
+    });
+    highlight.show();
+  }
+
+  const figureItOut: HTMLElement | null =
+    document.querySelector(".figure-it-out");
+  if (figureItOut) {
+    const underline = annotate(figureItOut, {
+      type: "underline",
+      multiline: true,
+      iterations: 3,
+      padding: 1,
+      animate: false,
+    });
+    underline.show();
+  }
+</script>
+
 <style lang="scss">
   main {
     flex: 1;
@@ -87,9 +113,12 @@ import Footer from "../components/Footer.astro";
   }
 
   h1 {
-    text-wrap: balance;
     margin-block-end: var(--space-xl);
-    line-height: 0.9;
+  }
+
+  .who-you-are {
+    white-space: nowrap;
+    color: var(--pink-7);
   }
 
   .subhead p {
