Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <a href="#">
  <span class="sr-only">Back to top</span>  
  <svg aria-hidden="true" class="sneaky-bear" viewBox="0 0 995 1100" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M212.531 236.156C213.274 233.427 212.885 230.514 211.452 228.076C210.019 225.638 207.663 223.881 204.917 223.203C157.852 211.581 122.963 169.063 122.963 118.422C122.963 58.8185 171.282 10.5 230.886 10.5C272.87 10.5 309.273 34.4714 327.122 69.5226C328.406 72.0428 330.652 73.9387 333.351 74.7812C336.051 75.6236 338.977 75.3414 341.466 73.9983C378.527 53.9991 420.944 42.6437 466.044 42.6437H530.331C575.229 42.6437 617.466 53.8973 654.409 73.729C656.893 75.0625 659.809 75.341 662.501 74.5018C665.192 73.6627 667.433 71.7763 668.719 69.2674C686.615 34.3549 722.944 10.5 764.826 10.5C824.43 10.5 872.748 58.8185 872.748 118.422C872.748 168.859 838.139 211.239 791.36 223.061C788.626 223.752 786.286 225.513 784.864 227.948C783.443 230.383 783.06 233.287 783.803 236.006C789.831 258.09 793.052 281.343 793.052 305.365V519.314C793.052 523.56 795.611 527.389 799.534 529.014C803.458 530.64 807.974 529.741 810.977 526.738L843.294 494.422C875.597 462.119 927.97 462.119 960.273 494.422C992.576 526.724 992.576 579.098 960.273 611.401L817.08 754.593C811.414 760.26 805.144 764.922 798.485 768.592C795.134 770.438 793.052 773.962 793.052 777.788V1028.6C793.052 1061.85 766.093 1088.81 732.836 1088.81H591.404C558.148 1088.81 531.188 1061.85 531.188 1028.6V936.379C531.188 933.258 529.8 930.299 527.4 928.304C525 926.31 521.837 925.486 518.769 926.056C511.554 927.397 504.143 928.096 496.58 928.096C490.046 928.096 483.626 927.574 477.349 926.568C474.313 926.081 471.215 926.95 468.875 928.945C466.535 930.94 465.187 933.86 465.187 936.935V1028.6C465.187 1061.85 438.227 1088.81 404.971 1088.81H263.539C230.282 1088.81 203.322 1061.85 203.322 1028.6V778.53C203.322 774.641 201.172 771.069 197.734 769.25C190.62 765.485 183.93 760.604 177.92 754.593L34.7272 611.401C2.42428 579.098 2.42428 526.724 34.7272 494.422C67.03 462.119 119.403 462.119 151.706 494.422L185.398 528.113C188.401 531.116 192.917 532.014 196.841 530.389C200.764 528.764 203.322 524.935 203.322 520.688V305.365C203.322 281.397 206.529 258.195 212.531 236.156Z" stroke="white" stroke-width="21" stroke-linejoin="round" />
  <path d="M928.62 512.427C924.52 516.527 917.871 516.527 913.771 512.427C909.67 508.326 909.67 501.678 913.771 497.578L928.62 512.427ZM955.895 485.152L928.62 512.427L913.771 497.578L941.046 470.303L955.895 485.152Z" fill="white" />
  <path d="M956.118 539.924C952.018 544.025 945.369 544.025 941.269 539.924C937.168 535.824 937.168 529.175 941.269 525.075L956.118 539.924ZM983.393 512.649L956.118 539.924L941.269 525.075L968.544 497.8L983.393 512.649Z" fill="white" />
  <path d="M64.1656 518.641C68.2661 522.741 74.9144 522.741 79.0149 518.641C83.1154 514.54 83.1154 507.892 79.0149 503.792L64.1656 518.641ZM36.8908 491.366L64.1656 518.641L79.0149 503.792L51.7401 476.517L36.8908 491.366Z" fill="white" />
  <path d="M36.6676 546.138C40.7681 550.238 47.4163 550.238 51.5168 546.138C55.6173 542.037 55.6173 535.389 51.5168 531.289L36.6676 546.138ZM9.39276 518.863L36.6676 546.138L51.5168 531.289L24.242 504.014L9.39276 518.863Z" fill="white" />
  <rect x="354.575" y="217.5" width="284.056" height="42.5905" fill="white" />
  <path fill-rule="evenodd" clip-rule="evenodd" d="M714.515 85.1181C772.179 131.386 804.574 204.526 804.574 269.959L606.418 269.959V229.491C606.418 207.952 588.958 190.491 567.418 190.491L425.788 190.491C404.249 190.491 386.788 207.952 386.788 229.491V269.959L189.608 269.959C189.608 204.526 222.004 131.386 279.668 85.1181C337.332 38.8504 415.542 12.8574 497.091 12.8574C578.641 12.8574 656.85 38.8504 714.515 85.1181Z" fill="white" />
  <circle cx="673.901" cy="353.836" r="25.9698" fill="white" />
  <circle cx="324.867" cy="353.836" r="25.9698" fill="white" />
  <path d="M566.218 400.777C566.218 427.168 534.499 456.872 499.216 456.872C463.933 456.872 432.214 427.168 432.214 400.777C432.214 374.386 463.933 361.303 499.216 361.303C534.499 361.303 566.218 374.386 566.218 400.777Z" fill="white" />
  <path d="M626.762 1047.74V1086.31" stroke="white" stroke-width="21" stroke-linecap="round" />
  <path d="M703.907 1047.74V1086.31" stroke="white" stroke-width="21" stroke-linecap="round" />
  <path d="M295.682 1047.74V1086.31" stroke="white" stroke-width="21" stroke-linecap="round" />
  <path d="M372.827 1047.74V1086.31" stroke="white" stroke-width="21" stroke-linecap="round" />
</svg>
</a>
<a href="#" class="logo">
  <svg viewBox="0 0 885 1059" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M551.674 948.205C551.674 946.548 550.331 945.205 548.674 945.205C547.017 945.205 545.674 946.548 545.674 948.205H551.674ZM551.674 960.205V948.205H545.674V960.205H551.674Z" fill="white" />
    <path d="M564.34 948.205C564.34 946.548 562.996 945.205 561.34 945.205C559.683 945.205 558.34 946.548 558.34 948.205H564.34ZM564.34 960.205V948.205H558.34V960.205H564.34Z" fill="white" />
    <path d="M575.193 868.767L622.258 821.701C627.75 816.21 632.332 810.152 636.005 803.716C650.166 812.171 668.761 810.313 680.94 798.135C695.327 783.747 695.31 760.403 680.901 745.995C670.773 735.866 656.23 732.849 643.486 736.947C639.558 723.942 632.452 711.688 622.17 701.405L608.007 687.243C597.679 676.914 585.36 669.791 572.289 665.874C576.432 653.107 573.425 638.518 563.272 628.365C548.863 613.957 525.52 613.94 511.132 628.327C498.905 640.554 497.081 659.25 505.653 673.433C499.233 677.101 493.191 681.675 487.711 687.155L440.344 734.522L440.333 719.688C440.321 703.66 427.319 690.658 411.291 690.646C395.263 690.634 382.279 703.618 382.291 719.646L382.337 782.692C382.339 785.668 382.789 788.54 383.623 791.243L337.273 851.254C326.787 866.972 333.646 879.42 342.25 888.024L368.454 913.547C377.058 922.152 390.786 920.718 397.298 912.3L412.627 891.128C413.889 892.872 415.376 896.096 416.939 897.659C418.748 899.468 421.411 902.755 423.459 904.162L410.145 927.223C405.326 937.624 402.556 949.228 411.161 957.832L420.165 967.072L427.569 973.931L440.684 985.778C447.061 992.155 456.369 993.811 464.259 990.743C469.893 988.552 473.438 983.213 476.643 978.088L492.404 952.891C493.887 950.521 495.633 948.326 497.61 946.35L537.425 906.535" stroke="white" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M411.783 705.187C411.784 706.844 413.128 708.188 414.785 708.189C416.442 708.191 417.784 706.848 417.783 705.192L411.783 705.187ZM411.774 693.178L411.783 705.187L417.783 705.192L417.774 693.183L411.774 693.178Z" fill="white" />
    <path d="M399.676 705.178C399.677 706.835 401.021 708.179 402.678 708.181C404.335 708.182 405.677 706.84 405.676 705.183L399.676 705.178ZM399.667 693.17L399.676 705.178L405.676 705.183L405.667 693.174L399.667 693.17Z" fill="white" />
    <rect x="541.738" y="702.92" width="88.4998" height="13.25" transform="rotate(45 541.738 702.92)" fill="white" />
    <path fill-rule="evenodd" clip-rule="evenodd" d="M650.156 753.094C652.682 775.976 643.729 799.203 629.335 813.597L585.68 769.942C595.284 760.215 595.246 744.545 585.566 734.865L572.372 721.671C562.692 711.991 547.022 711.953 537.295 721.557L493.855 678.117C508.249 663.723 531.476 654.77 554.358 657.296C577.239 659.821 600.187 671.333 618.153 689.299C636.119 707.265 647.631 730.213 650.156 753.094Z" fill="white" />
    <ellipse cx="582.096" cy="803.26" rx="8.09111" ry="8.0793" transform="rotate(45 582.096 803.26)" fill="white" />
    <ellipse cx="505.202" cy="726.366" rx="8.09111" ry="8.0793" transform="rotate(45 505.202 726.366)" fill="white" />
    <path d="M548.047 789.863C542.241 795.669 528.719 795.215 520.946 787.442C513.173 779.669 512.719 766.147 518.525 760.341C524.33 754.536 534.196 758.646 541.969 766.419C549.742 774.192 553.852 784.058 548.047 789.863Z" fill="white" />
    <path d="M430.374 955.873L421.888 964.358" stroke="white" stroke-width="6" stroke-linecap="round" />
    <path d="M447.369 972.869L438.884 981.354" stroke="white" stroke-width="6" stroke-linecap="round" />
    <path d="M357.435 882.935L348.95 891.42" stroke="white" stroke-width="6" stroke-linecap="round" />
    <path d="M374.43 899.93L365.945 908.415" stroke="white" stroke-width="6" stroke-linecap="round" />
    <path d="M426.5 821.5L422.074 464.999" stroke="white" stroke-width="6" stroke-linecap="round" />
    <circle cx="421.5" cy="273.5" r="169" stroke="white" stroke-width="6" />
    <path d="M405.5 444.5H437L446.5 464.5H396.5L405.5 444.5Z" stroke="white" stroke-width="6" stroke-linejoin="round" />
    <path d="M380 757L442 715" stroke="white" stroke-width="6" stroke-linecap="round" />
    <path d="M384.118 142.738C357.611 150.316 334.033 165.771 316.509 187.054C298.985 208.337 288.343 234.443 285.995 261.912" stroke="white" stroke-width="30" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M524.5 933.5H521.5H524.5ZM553.5 962.5V965.5H553.5L553.5 962.5ZM582.5 933.5H585.5H582.5ZM585.5 862.5C585.5 860.843 584.157 859.5 582.5 859.5C580.843 859.5 579.5 860.843 579.5 862.5L585.5 862.5ZM527.5 933.5V919.218H521.5V933.5H527.5ZM553.5 959.5C539.141 959.5 527.5 947.859 527.5 933.5H521.5C521.5 951.173 535.827 965.5 553.5 965.5V959.5ZM579.5 933.5C579.5 947.859 567.859 959.5 553.5 959.5L553.5 965.5C571.173 965.5 585.5 951.173 585.5 933.5H579.5ZM579.5 862.5L579.5 933.5H585.5L585.5 862.5L579.5 862.5Z" fill="white" />
  </svg>
</a>
<div class="header-wrapper">
  <header>
    <button>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
      </svg>
    </button>
  </header>
</div>
<div class="search-wrapper">
  <div class="search-bar">
    <div class="search-controls">
      <button class="camera">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z" />
          <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z" />
        </svg>
      </button>
      <input type="text" placeholder="Search for anything" />
      <button class="magnifier">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
        </svg>
      </button>
    </div>
  </div>
</div>
<main>
  <ul>
    <li class="skeleton">
      <div class="skeleton__block">
        <img src="https://picsum.photos/400/400?random=one" alt="" />
      </div>
      <div class="skeleton__block"></div>
      <div class="skeleton__block"></div>
    </li>
    <li class="skeleton">
      <div class="skeleton__block">
        <img src="https://picsum.photos/400/400?random=two" alt="" />
      </div>
      <div class="skeleton__block"></div>
      <div class="skeleton__block"></div>
    </li>
    <li class="skeleton">
      <div class="skeleton__block">
        <img src="https://picsum.photos/400/400?random=three" alt="" />
      </div>
      <div class="skeleton__block"></div>
      <div class="skeleton__block"></div>
    </li>
    <li class="skeleton">
      <div class="skeleton__block">
        <img src="https://picsum.photos/400/400?random=four" alt="" />
      </div>
      <div class="skeleton__block"></div>
      <div class="skeleton__block"></div>
    </li>
    <li class="skeleton">
      <div class="skeleton__block">
        <img src="https://picsum.photos/400/400?random=five" alt="" />
      </div>
      <div class="skeleton__block"></div>
      <div class="skeleton__block"></div>
    </li>
  </ul>
</main>
              
            
!

CSS

              
                @font-face {
  font-family: "Geist Sans";
  src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype");
}

* {
	box-sizing: border-box;
}

html:focus-within {
  scroll-behavior: smooth;
}

:root {
	--bg: hsl(0 0% 10%);
  --header-height: 80px;
  --content-width: min(600px, 100% - 5rem);
  --color: hsl(0 0% 98%);
}

body {
  background: var(--bg);
  font-family: "Geist Sans", sans-serif;
  min-height: 200vh;
  overflow-x: hidden;
  color: var(--color);
}

.header-wrapper {
  position: sticky;
  top: 0;
  z-index: 4;
  margin: 0 auto;
  max-width: 100%;
  width: var(--content-width);
  height: var(--header-height);
  clip-path: inset(0 0 0 calc(100% - 66px));
}

header {
	height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 auto;
}

a svg {
  width: 64px;
  object-fit: cover;
}

.sneaky-bear {
	width: calc(var(--header-height) * 0.75);
	position: fixed;
	top: 0;
	left: 0;
	transform: rotate(90deg) translateX(calc(var(--header-height) * 0.125)) translateY(120%);
  z-index: 9999;
}

.logo {
  padding: 0;
  position: fixed;
  top: calc(var(--header-height) * 0.5);
  left: 50%;
  transform: translate(-50%, -50%);
}

input::placeholder {
	font-weight: 50;
	line-height: 48px;
	color: hsl(0 0% 60%);
}

.search-bar {
  z-index: 2;
  width: var(--content-width);
  height: var(--header-height);
  display: flex;
  align-items: center;
  max-width: calc(100vw);
}

.search-wrapper {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: calc(100vw);
  z-index: 3;
}

.search-controls {
  width: 100%;
  position: relative;
}

button {
	width: 48px;
	aspect-ratio: 1;
  background: transparent;
  color: var(--color);
  border: 0;
  padding: 0;
  border-radius: 50%;
  transition: background 0.2s;
  z-index: 2;
  background: hsl(0 0% 50% / calc(var(--active, 0) * 0.25));
  cursor: pointer;
}

button:is(:hover, :focus-visible) {
	--active: 1;
}

button svg {
	width: 50%;
}

.magnifier {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 48px;
  height: 48px;
  display: inline-block;
  transform: translateY(-50%);
}

header button {
	translate: -0.5rem 0;
}

.camera {
  top: 50%;
  position: absolute;
  left: 0.5rem;
  width: 48px;
  height: 48px;
  display: inline-block;
  transform: translateY(-50%);
}

input {
  width: 100%;
  height: 48px;
  border-radius: 24px;
  line-height: 48px;
  border: 2px solid var(--color);
  padding: 0 calc(48px + 1rem);
  background: var(--bg);
  outline-color: transparent;
  color: var(--color);
  font-weight: 80;
}

main {
  width: var(--content-width);
  max-width: 100%;
  margin: 0 auto;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  padding-top: 6rem;
  display: grid;
  gap: 1rem;
}

/* Skeleton stuff */
li img {
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	object-fit: cover;
}
.skeleton {
  --block: hsl(0 0% 20%);
  --padding: 1rem;
  padding: var(--padding);
  gap: var(--padding);
  width: 100%;
  display: grid;
  grid-template: 1fr 1fr / 25% 1fr;
  background: var(--bg);
  max-inline-size: 100%;
}

.skeleton__block {
  background: var(--block);
}

.skeleton__block:first-of-type {
  grid-row: 1 / -1;
  aspect-ratio: 1;
  position: relative;
}

.skeleton__block:last-of-type {
  width: 65%;
}

@supports (animation-timeline: scroll()) {
	.search-controls {
		animation: shrink both ease-in-out;
	  animation-timeline: scroll();
	  animation-range: 0 calc(var(--header-height) * 0.5);
	}
	.search-wrapper {
		animation: shadow both linear, darken both linear;
	  animation-timeline: scroll();
	  animation-range: calc(var(--header-height) * 1) calc(var(--header-height) * 1.5), calc(var(--header-height) * 1) calc(var(--header-height) * 1.5);
	}
	.sneaky-bear {
    z-index: 10;
		animation: peak both linear;
		animation-timeline: scroll();
		animation-range: calc(var(--header-height) * 1.5) calc(var(--header-height) * 2);
	}
	.logo {
		animation: fade both linear;
	  animation-timeline: scroll();
	  animation-range: 0 calc(var(--header-height) * 0.8);
	}
	/* Animations */
	@keyframes peak {
		to {
			transform: rotate(90deg) translateX(calc(var(--header-height) * 0.125)) translateY(50%);
		}
	}
	@keyframes fade {
	  to {
	    opacity: 0;
	    translate: 0 -25%;
	  }
	}

	@keyframes shrink {
	  to {
	    width: calc(100% - 48px - 1rem);
	  }
	}

	@keyframes darken {
		to {
			background: var(--bg);
		}
	}

	@keyframes shadow {
	  to {
	    box-shadow: 0 5px 10px hsl(0 0% 0%);
	  }
	}

}

svg {
  transition: opacity 0.2s;
}

a[href="#"]:is(:focus, :hover) svg {
  opacity: 0.5;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
              
            
!

JS

              
                import gsap from 'https://cdn.skypack.dev/gsap@3.12.2'
import { ScrollTrigger } from 'https://cdn.skypack.dev/gsap@3.12.2/ScrollTrigger';

if (!CSS.supports('animation-timeline: scroll()')) {
  gsap.registerPlugin(ScrollTrigger);
  const HEADER = document.querySelector('header')
  gsap.to('.search-controls', {
    width: HEADER.offsetWidth - 66,
    scrollTrigger: {
      scrub: 0.25,
      ease: 'none',
      start: 0,
      end: HEADER.offsetHeight
    }
  })
  gsap.to('.logo svg', {
    yPercent: -25,
    opacity: 0,
    scrollTrigger: {
      scrub: 0.25,
      ease: 'none',
      start: 0,
      end: HEADER.offsetHeight * 0.8
    }
  })
  gsap.to('.search-wrapper', {
    boxShadow: '0 5px 10px hsl(0 0% 0%)',
    scrollTrigger: {
      scrub: 0.25,
      ease: 'none',
      start: HEADER.offsetHeight,
      end: HEADER.offsetHeight * 1.5
    }
  })
  gsap.to('.search-wrapper', {
    background: 'var(--bg)',
    scrollTrigger: {
      scrub: 0.25,
      ease: 'none',
      start: HEADER.offsetHeight,
      end: HEADER.offsetHeight * 1.5
    }
  })
  gsap.to('.sneaky-bear', {
    transform: 'rotate(90deg) translateX(calc(var(--header-height) * 0.125)) translateY(50%)',
    scrollTrigger: {
      scrub: 0.25,
      ease: 'none',
      start: HEADER.offsetHeight * 1.5,
      end: HEADER.offsetHeight * 2
    }
  })
}
              
            
!
999px

Console