diff --git a/src/guide/a11y-basics.md b/src/guide/a11y-basics.md
index cec1c71142..d7d83d8106 100644
--- a/src/guide/a11y-basics.md
+++ b/src/guide/a11y-basics.md
@@ -54,7 +54,7 @@ export default {
 </script>
 ```
 
-<common-codepen-snippet title="Skip to Main" slug="VwepxJa" :height="350" tab="js,result" :team="false" user="mlama007" name="Maria" theme="light" :preview="false" :editable="false" />
+<common-codepen-snippet title="Skip to Main" slug="GRrvQJa" :height="350" tab="js,result" theme="light" :preview="false" :editable="false" />
 
 [Read documentation on skip link to main content](https://www.w3.org/WAI/WCAG21/Techniques/general/G1.html)
 
diff --git a/src/guide/reactivity.md b/src/guide/reactivity.md
index 4f686402e0..437f7bb78c 100644
--- a/src/guide/reactivity.md
+++ b/src/guide/reactivity.md
@@ -305,7 +305,7 @@ The template for a component is compiled down into a [`render`](/guide/render-fu
 A `render` function is conceptually very similar to a `computed` property. Vue doesn't track exactly how dependencies are used, it only knows that they were used at some point while the function was running. If any of those properties subsequently changes, it will trigger the effect to run again, re-running the `render` function to generate new VNodes. These are then used to make the necessary changes to the DOM.
 
 <div class="reactivecontent">
-  <common-codepen-snippet title="Second Reactivity with Proxies in Vue 3 Explainer" slug="GRJZddR" tab="result" theme="light" :height="500" :team="false" user="sdras" name="Sarah Drasner" :editable="false" :preview="false" />
+  <common-codepen-snippet title="Second Reactivity with Proxies in Vue 3 Explainer" slug="wvgqyJK" tab="result" theme="light" :height="500" :editable="false" :preview="false" />
 </div>
 
 > If you are using Vue 2.x and below, you may be interested in some of the change detection caveats that exist for those versions, [explored in more detail here](change-detection.md).
diff --git a/src/guide/transitions-overview.md b/src/guide/transitions-overview.md
index 7532eafa2d..eb98a33ee0 100644
--- a/src/guide/transitions-overview.md
+++ b/src/guide/transitions-overview.md
@@ -174,7 +174,7 @@ If we were to apply these states to a transition, it would look something like t
 
 Easing can also convey the quality of material being animated. Take this pen for example, which ball do you think is hard and which is soft?
 
-<common-codepen-snippet title="Bouncing Ball Demo" slug="zxJWBJ" :height="500" :team="false" user="sdras" name="Sarah Drasner" :editable="false" />
+<common-codepen-snippet title="Bouncing Ball Demo" slug="wvgqyyW" :height="500" :editable="false" />
 
 You can get a lot of unique effects and make your animation very stylish by adjusting your easing. CSS allows you to modify this by adjusting a cubic bezier property, [this playground](https://cubic-bezier.com/#.17,.67,.83,.67) by Lea Verou is very helpful for exploring this.