diff --git a/scss/_placeholder.scss b/scss/_placeholder.scss
index e05056396347..bc70b41e6cf9 100644
--- a/scss/_placeholder.scss
+++ b/scss/_placeholder.scss
@@ -1,19 +1,29 @@
-@use "colors" as *;
 @use "config" as *;
 @use "functions" as *;
+@use "mixins/border-radius" as *;
 @use "mixins/tokens" as *;
 
 $placeholder-tokens: () !default;
+$placeholder-wave-tokens: () !default;
 
 // scss-docs-start placeholder-tokens
 // stylelint-disable-next-line scss/dollar-variable-default
 $placeholder-tokens: defaults(
   (
-    --placeholder-opacity-max: .5,
-    --placeholder-opacity-min: .2,
+    --placeholder-opacity-max: .18,
+    --placeholder-opacity-min: .1,
   ),
   $placeholder-tokens
 );
+
+// stylelint-disable-next-line scss/dollar-variable-default
+$placeholder-wave-tokens: defaults(
+  (
+    --placeholder-opacity-max: .5,
+    --placeholder-opacity-min: .25,
+  ),
+  $placeholder-wave-tokens
+);
 // scss-docs-end placeholder-tokens
 
 @layer components {
@@ -21,10 +31,11 @@ $placeholder-tokens: defaults(
     @include tokens($placeholder-tokens);
 
     display: inline-block;
-    min-height: 1em;
+    min-height: 1.25em;
     vertical-align: middle;
     cursor: wait;
     background-color: currentcolor;
+    @include border-radius(var(--radius-3));
     opacity: var(--placeholder-opacity-max);
 
     &.btn::before {
@@ -35,15 +46,15 @@ $placeholder-tokens: defaults(
 
   // Sizing
   .placeholder-xs {
-    min-height: .6em;
+    min-height: .75em;
   }
 
   .placeholder-sm {
-    min-height: .8em;
+    min-height: 1em;
   }
 
   .placeholder-lg {
-    min-height: 1.2em;
+    min-height: 1.75em;
   }
 
   // Animation
@@ -66,7 +77,9 @@ $placeholder-tokens: defaults(
   }
 
   .placeholder-wave {
-    mask-image: linear-gradient(130deg, $black 55%, rgb(0 0 0 / calc(1 - var(--placeholder-opacity-min))) 75%, $black 95%);
+    @include tokens($placeholder-wave-tokens);
+
+    mask-image: linear-gradient(110deg, var(--black) 40%, rgb(0 0 0 / calc(1 - var(--placeholder-opacity-max))) 50%, var(--black) 60%);
     mask-size: 200% 100%;
     animation: placeholder-wave 2s linear infinite;
 
diff --git a/site/src/content/docs/components/placeholder.mdx b/site/src/content/docs/components/placeholder.mdx
index 0323beb56c3d..7da7fdc0e5fc 100644
--- a/site/src/content/docs/components/placeholder.mdx
+++ b/site/src/content/docs/components/placeholder.mdx
@@ -39,7 +39,7 @@ In the example below, we take a typical card component and recreate it with plac
         <span class="placeholder col-6"></span>
         <span class="placeholder col-8"></span>
       </p>
-      <a class="btn-solid theme-primary disabled placeholder col-6" aria-disabled="true"></a>
+      <a class="btn-solid theme-primary disabled col-6" aria-disabled="true"></a>
     </div>
   </div>`} />
 
@@ -82,13 +82,13 @@ We apply additional styling to `.btn`s via `::before` to ensure the `height` is
     <span class="placeholder col-6"></span>
   </p>
 
-  <a class="btn-solid theme-primary disabled placeholder col-4" aria-disabled="true"></a>`} />
+  <a class="btn-solid theme-primary disabled col-4" aria-disabled="true"></a>`} />
 
 <Callout>
 The use of `aria-hidden="true"` only indicates that the element should be hidden to screen readers. The *loading* behavior of the placeholder depends on how authors will actually use the placeholder styles, how they plan to update things, etc. Some JavaScript code may be needed to *swap* the state of the placeholder and inform AT users of the update.
 </Callout>
 
-### Width
+## Width
 
 You can change the `width` through grid column classes, width utilities, or inline styles.
 
@@ -96,26 +96,26 @@ You can change the `width` through grid column classes, width utilities, or inli
 <span class="placeholder w-75"></span>
 <span class="placeholder" style="width: 25%;"></span>`} />
 
-### Color
+## Color
 
 By default, the `placeholder` uses `currentColor`. This can be overridden with a custom color or utility class.
 
 <Example code={[
-  `<span class="placeholder col-12"></span>
+  `<span class="placeholder col-9"></span>
   `,
-  ...getData('theme-colors').map((themeColor) => `<span class="placeholder col-12 bg-${themeColor.name}"></span>`)
+  ...getData('theme-colors').map((themeColor) => `<span class="placeholder col-6 bg-${themeColor.name}"></span>`)
 ]} />
 
-### Sizing
+## Sizing
 
 The size of `.placeholder`s are based on the typographic style of the parent element. Customize them with sizing modifiers: `.placeholder-lg`, `.placeholder-sm`, or `.placeholder-xs`.
 
-<Example code={`<span class="placeholder col-12 placeholder-lg"></span>
+<Example class="vstack gap-2" code={`<span class="placeholder col-12 placeholder-lg"></span>
 <span class="placeholder col-12"></span>
 <span class="placeholder col-12 placeholder-sm"></span>
 <span class="placeholder col-12 placeholder-xs"></span>`} />
 
-### Animation
+## Animation
 
 Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being *actively* loaded.
 
@@ -127,6 +127,12 @@ Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better c
     <span class="placeholder col-12"></span>
   </p>`} />
 
+### Text
+
+Add `placeholder-wave` to an inline element with text to apply the placeholder animations to the text.
+
+<Example code={`<span class="placeholder-wave fg-3">Working on it…</span>`} />
+
 ## CSS
 
 ### Variables