diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index d5d4fa1ced8a..5079a2d9cbb1 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "53.5 kB"
+      "maxSize": "53.75 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",
diff --git a/scss/_placeholder.scss b/scss/_placeholder.scss
index 706ef7f9e218..1a83e9a9d621 100644
--- a/scss/_placeholder.scss
+++ b/scss/_placeholder.scss
@@ -1,18 +1,29 @@
 @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-wave-opacity-max: 1,
+    --placeholder-wave-opacity-min: .4,
+  ),
+  $placeholder-wave-tokens
+);
 // scss-docs-end placeholder-tokens
 
 @layer components {
@@ -20,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 {
@@ -34,21 +46,22 @@ $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
+  .placeholder-pulse,
   .placeholder-glow {
     .placeholder {
-      animation: placeholder-glow 2s ease-in-out infinite;
+      animation: placeholder-pulse 2s ease-in-out infinite;
 
       @if $enable-reduced-motion {
         @media (prefers-reduced-motion: reduce) {
@@ -58,19 +71,24 @@ $placeholder-tokens: defaults(
     }
   }
 
-  @keyframes placeholder-glow {
+  @keyframes placeholder-pulse {
     50% {
       opacity: var(--placeholder-opacity-min);
     }
   }
 
   .placeholder-wave {
-    mask-image: linear-gradient(130deg, var(--black) 55%, rgb(0 0 0 / calc(1 - var(--placeholder-opacity-min))) 75%, var(--black) 95%);
-    mask-size: 200% 100%;
-    animation: placeholder-wave 2s linear infinite;
+    @include tokens($placeholder-wave-tokens);
+
+    mask-image: linear-gradient(110deg, rgb(0 0 0 / var(--placeholder-wave-opacity-min)) 35%, rgb(0 0 0 / var(--placeholder-wave-opacity-max)) 50%, rgb(0 0 0 / var(--placeholder-wave-opacity-min)) 65%);
+    mask-repeat: no-repeat;
+    mask-position: 100% 0%;
+    mask-size: 250% 100%;
+    animation: placeholder-wave 1.6s linear infinite;
 
     @if $enable-reduced-motion {
       @media (prefers-reduced-motion: reduce) {
+        mask-image: none;
         animation: none;
       }
     }
@@ -78,7 +96,7 @@ $placeholder-tokens: defaults(
 
   @keyframes placeholder-wave {
     100% {
-      mask-position: -200% 0%;
+      mask-position: 0% 0%;
     }
   }
 }
diff --git a/site/src/assets/search.js b/site/src/assets/search.js
index a6a012afaa6c..5814012e13f9 100644
--- a/site/src/assets/search.js
+++ b/site/src/assets/search.js
@@ -320,7 +320,7 @@ class BdSearchResults extends HTMLElement {
 
   _paintLoading() {
     this.innerHTML = `
-      <div class="bd-search-loading placeholder-glow" role="status" aria-live="polite">
+      <div class="bd-search-loading placeholder-wave" role="status" aria-live="polite">
         <span class="visually-hidden">${escapeHtml(instance.translate('searching') || 'Searching…')}</span>
         ${Array.from({ length: 3 }, () => `
           <div class="bd-search-skeleton">
diff --git a/site/src/content/docs/components/placeholder.mdx b/site/src/content/docs/components/placeholder.mdx
index 0323beb56c3d..9d0a0795f196 100644
--- a/site/src/content/docs/components/placeholder.mdx
+++ b/site/src/content/docs/components/placeholder.mdx
@@ -29,17 +29,17 @@ In the example below, we take a typical card component and recreate it with plac
   <div class="card" aria-hidden="true">
     <Placeholder width="100%" height="180" class="card-img-top" text={false} />
     <div class="card-body">
-      <div class="h5 card-title placeholder-glow">
+      <div class="h5 card-title placeholder-wave">
         <span class="placeholder col-6"></span>
       </div>
-      <p class="card-text placeholder-glow">
+      <p class="card-text placeholder-wave">
         <span class="placeholder col-7"></span>
         <span class="placeholder col-4"></span>
         <span class="placeholder col-4"></span>
         <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>`} />
 
@@ -57,10 +57,10 @@ In the example below, we take a typical card component and recreate it with plac
 <div class="card" aria-hidden="true">
   <img src="..." class="card-img-top" alt="...">
   <div class="card-body">
-    <h5 class="card-title placeholder-glow">
+    <h5 class="card-title placeholder-wave">
       <span class="placeholder col-6"></span>
     </h5>
-    <p class="card-text placeholder-glow">
+    <p class="card-text placeholder-wave">
       <span class="placeholder col-7"></span>
       <span class="placeholder col-4"></span>
       <span class="placeholder col-4"></span>
@@ -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,37 +96,43 @@ 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.
+Use `.placeholder-wave` for the default loading animation. Use `.placeholder-pulse` for an opacity pulse. The old `.placeholder-glow` class remains as a compatibility alias for `.placeholder-pulse`.
 
-<Example code={`<p class="placeholder-glow">
+<Example code={`<p class="placeholder-wave">
     <span class="placeholder col-12"></span>
   </p>
 
-  <p class="placeholder-wave">
+  <p class="placeholder-pulse">
     <span class="placeholder col-12"></span>
   </p>`} />
 
+### Text
+
+Add `.placeholder-wave` to an inline element to apply the loading animation to text.
+
+<Example code={`<span class="placeholder-wave fg-3">Working on it…</span>`} />
+
 ## CSS
 
 ### Variables
diff --git a/site/src/content/docs/guides/migration.mdx b/site/src/content/docs/guides/migration.mdx
index a443f5a39d91..552b0fd455c0 100644
--- a/site/src/content/docs/guides/migration.mdx
+++ b/site/src/content/docs/guides/migration.mdx
@@ -251,6 +251,7 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
   - **Tab panes fade in on their own.** The plugin adds `.active` and `.show` in the same frame instead of sequencing them, and the CSS animates from `@starting-style`. The pane you leave hides at once, since two in-flow panes cannot cross-fade. `shown.bs.tab` now fires after the incoming pane finishes. Add `.tab-pane-instant` for an instant swap.
   - **Tooltips and popovers animate from `@starting-style`.** The plugin no longer adds `.fade` to the tip. `animation: false` adds `.tooltip-instant` or `.popover-instant` instead, which you can also write in a custom `template`.
   - **Hover and focus tooltips stay open on the tip.** In v5 the tooltip hid as soon as the pointer left the trigger. v6 keeps it open while the pointer or focus is on the tip itself, so links inside the tooltip are reachable ([WCAG 1.4.13](https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html)). Press Escape or leave both the trigger and the tip to hide it. See [Tooltips]([[docsref:/components/tooltip]]).
+- **Placeholder loading animations now favor shimmer.** Use `.placeholder-wave` for the standard loading animation. The old opacity animation moved to `.placeholder-pulse`. The `.placeholder-glow` class remains as a compatibility alias for `.placeholder-pulse`.
 - **Collapse animates its size natively.** The plugin toggles `.show` and nothing else. The CSS animates the size with [`interpolate-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size), as the accordion already does:
   - Removed the `.collapsing` class, and with it the inline `height` and `width` the plugin used to write. Replace any CSS, tests, or selectors that depend on either.
   - Browsers without `interpolate-size` open and close the element at once. Firefox is the one to watch.
diff --git a/skills/bootstrap-v5-v6-migration/SKILL.md b/skills/bootstrap-v5-v6-migration/SKILL.md
index 8c9f3bee7f58..b9fd22c99361 100644
--- a/skills/bootstrap-v5-v6-migration/SKILL.md
+++ b/skills/bootstrap-v5-v6-migration/SKILL.md
@@ -128,6 +128,10 @@ New button variants: `.btn-solid`, `.btn-outline`, `.btn-subtle`, `.btn-text`, `
 
 Use `.theme-reset` on a nested subtree to drop inherited `--theme-*` tokens and return to component defaults.
 
+### Placeholder animations
+
+Use `.placeholder-wave` for the standard loading animation. Replace `.placeholder-glow` with `.placeholder-pulse` when you want the old opacity animation. `.placeholder-glow` remains as a compatibility alias.
+
 ### Utility class renames
 
 | v5 | v6 |