Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              mixin bear()
  svg(viewbox='0 0 300 550' preserveaspectratio='xMinYMin')
    g#layer14(inkscape:groupmode='layer' inkscape:label='Body' transform='translate(-0.17695185,5.8728103)')
      path#path4903.bear-body(style='fill-opacity:1;stroke:none;stroke-width:12.90430737;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' d='M 150,0 C 63.857716,0 10.00001,34.411611 10,130 8.4323514,169.71341 11.334178,200.02544 10,235 8.3321211,278.72231 2.7e-6,317.82631 0,365.88086 -1.37e-6,390.24297 4.1966961,413.45279 11.787109,434.5625 19.377522,455.67221 9.8577985,536.16856 28.710938,550 H 272.67383 c 19.19841,-9.91392 7.94865,-94.32779 15.53906,-115.4375 C 295.80331,413.45279 300,390.24297 300,365.88086 300,317.20713 291.66788,278.72231 290,235 288.66582,200.02544 289.9011,162.43395 290,130 290,34.411612 236.1423,0 150,0 Z' transform='translate(0.17695185,-5.8728103)' inkscape:connector-curvature='0' sodipodi:nodetypes='scassccssacs')
      path#path4915.bear-foot(inkscape:connector-curvature='0' style='fill:none;fill-opacity:1;stroke-width:5.85319996;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' d='m 31.637353,519.15731 c 2.128588,-6.8582 23.982905,-12.13974 50.232636,-12.13974 26.248761,0 48.102611,5.28116 50.232431,12.13908' sodipodi:nodetypes='csc')
      path#path4927.bear-foot(inkscape:connector-curvature='0' d='m 168.64329,519.15731 c 2.12859,-6.8582 23.98291,-12.13974 50.23264,-12.13974 26.24876,0 48.10261,5.28116 50.23243,12.13908' style='fill:none;fill-opacity:1;stroke-width:5.85319996;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' sodipodi:nodetypes='csc')
      path#path149.bear-shirt(style='fill-opacity:1;stroke:none;stroke-width:13.78312874;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' d='m 8.8722644,249.65144 c -5.1629985,31.643 -8.69531058,63.66489 -8.69531255,101.71235 -1.37e-6,26.42998 3.35133925,50.764 10.94175215,73.6655 2.228082,6.7225 3.81782,19.90497 4.247701,34.27148 H 285.35468 c 0.23749,-14.43766 2.4009,-26.34504 3.03516,-33.42612 7.59042,-22.9015 11.78711,-48.08088 11.78711,-74.51086 0,-38.57756 -3.44487,-70.14589 -8.63477,-101.71235 z' inkscape:connector-curvature='0' sodipodi:nodetypes='csscccscc')
      path#path169.bear-body(d='m 300.15155,356.11914 c 0.0101,1.31375 0.0254,2.61975 0.0254,3.94922 0,24.29854 -4.1967,47.44733 -11.78711,68.50195 -0.2147,0.59555 -0.19559,1.39781 -0.59961,1.94141 -5.78277,7.78072 -11.43145,15.89647 -24.13281,16.23047 -13.44563,-3.6e-4 -24.34538,-12.1112 -24.3457,-27.05078 5.4e-4,-10.87395 5.86097,-20.69058 14.87695,-24.91993 v -38.65234 z' style='fill-opacity:1;stroke:none;stroke-width:13.21567822;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' inkscape:connector-curvature='0' sodipodi:nodetypes='cscaccccc')
      path#path246.bear-body(style='fill-opacity:1;stroke:none;stroke-width:12.90430737;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' d='M 54.804688,0 C 30.059929,2.7017562e-4 10.00038,19.355898 10,43.232422 10.356265,71.413496 21.645518,98.108186 10,130 9.219548,149.77128 9.5473055,167.2103 9.9082031,184.05664 30.474266,245.71158 81.412606,286.47461 147.01367,286.47461 c 65.81297,0 120.35609,-41.02437 142.4375,-103.01367 C 289.59724,164.97889 289.94879,146.79556 290,130 278.30005,97.069175 289.62438,70.763724 290,43.232422 289.99962,19.355898 269.94007,2.6910984e-4 245.19531,0 234.95959,0.01262912 225.03691,3.406576 217.07812,9.6171875 197.87609,2.9820709 175.33701,0 150,0 124.66299,0 102.12391,2.982071 82.921875,9.6171875 74.963087,3.4065766 65.040411,0.01262978 54.804688,0 Z' transform='translate(0.17695185,-5.8728103)' inkscape:connector-curvature='0' sodipodi:nodetypes='ccccscccccscc')
      g#g5009
        path#path4870.bear-body(sodipodi:nodetypes='ccsccccc' inkscape:connector-curvature='0' style='fill-opacity:1;stroke:none;stroke-width:13.21567822;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' d='m 0.20235,356.11914 c -0.0101,1.31375 -0.0254,2.61975 -0.0254,3.94922 1.01126,25.71444 3.43454,50.20488 12.38672,70.44336 3.92161,8.86572 11.43145,15.89647 24.13281,16.23047 13.44563,-3.6e-4 24.34538,-12.1112 24.3457,-27.05078 -5.4e-4,-10.87395 -5.86097,-20.69058 -14.87695,-24.91993 v -38.65234 z')
        path#path4874.bear-claw(style='fill-opacity:1;stroke:none;stroke-width:6.78819799;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' d='m 29.294138,420.39281 c -1.425051,0.0546 -2.474233,0.60858 -2.351563,1.24219 l 4.765625,24.58203 c 1.568539,0.2919 3.223619,0.47899 4.988281,0.52539 0.09701,0 0.19232,-0.007 0.289063,-0.008 l -4.898438,-25.29864 c -0.06136,-0.3168 -0.405236,-0.59034 -0.910156,-0.77929 -0.50498,-0.18901 -1.170282,-0.29097 -1.882812,-0.26368 z' inkscape:connector-curvature='0')
        path#path5001.bear-claw(transform='translate(0.17695185,-5.8728103)' d='M 44.148438 421.51758 C 43.609248 421.51558 42.9497 421.65268 42.291016 421.92578 C 40.973663 422.47197 40.182458 423.3547 40.517578 423.90625 L 53.380859 445.06641 C 54.613264 443.75062 55.725459 442.29617 56.6875 440.71875 L 45.271484 421.93359 C 45.103903 421.65783 44.687551 421.51938 44.148438 421.51758 z ' style='fill-opacity:1;stroke:none;stroke-width:6.78819799;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1')
      g#g5017(transform='matrix(-1,0,0,1,300.3539,0)')
        path#path5011.bear-body(d='m 0.20235,356.11914 c -0.0101,1.31375 -0.0254,2.61975 -0.0254,3.94922 1.01126,25.71444 3.43454,50.20488 12.38672,70.44336 3.92161,8.86572 11.43145,15.89647 24.13281,16.23047 13.44563,-3.6e-4 24.34538,-12.1112 24.3457,-27.05078 -5.4e-4,-10.87395 -5.86097,-20.69058 -14.87695,-24.91993 v -38.65234 z' style='fill-opacity:1;stroke:none;stroke-width:13.21567822;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' inkscape:connector-curvature='0' sodipodi:nodetypes='ccsccccc')
        path#path5013.bear-claw(inkscape:connector-curvature='0' d='m 29.294138,420.39281 c -1.425051,0.0546 -2.474233,0.60858 -2.351563,1.24219 l 4.765625,24.58203 c 1.568539,0.2919 3.223619,0.47899 4.988281,0.52539 0.09701,0 0.19232,-0.007 0.289063,-0.008 l -4.898438,-25.29864 c -0.06136,-0.3168 -0.405236,-0.59034 -0.910156,-0.77929 -0.50498,-0.18901 -1.170282,-0.29097 -1.882812,-0.26368 z' style='fill-opacity:1;stroke:none;stroke-width:6.78819799;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1')
        path#path5015.bear-claw(style='fill-opacity:1;stroke:none;stroke-width:6.78819799;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' d='m 44.148438,421.51758 c -0.53919,-0.002 -1.198738,0.1351 -1.857422,0.4082 -1.317353,0.54619 -2.108558,1.42892 -1.773438,1.98047 l 12.863281,21.16016 c 1.232405,-1.31579 2.3446,-2.77024 3.306641,-4.34766 L 45.271484,421.93359 c -0.167581,-0.27576 -0.583933,-0.41421 -1.123046,-0.41601 z' transform='translate(0.17695185,-5.8728103)' inkscape:connector-curvature='0')
    g#layer13(inkscape:groupmode='layer' inkscape:label='Shirt' style='display:inline' transform='translate(-0.17695185,5.8728103)')
      g#layer11(style='fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' transform='translate(82.176901,341.4761)')
        path#path5056(d='m 80,6 h -9 v 14 h 9 M 114,6 h -9 v 14 h 9 m -3,-7 h -6 m -28,0 h -6 m 51,7 V 6 l 11,14 V 6 M 22,16.7 33,24 44,16.7 V 9.3 L 33,2 22,9.3 Z m 22,0 L 33,9.3 22,16.7 M 22,9.3 33,16.6 44,9.3 M 33,2 v 7.3 m 0,7.4 V 24 M 88,14 h 6 c 2.2,0 4,-1.8 4,-4 C 98,7.8 96.2,6 94,6 H 88 V 20 M 15,8 C 13.7,6.7 12,6 10,6 6,6 3,9 3,13 c 0,4 3,7 7,7 2,0 3.7,-0.8 5,-2 m 49,-5 c 0,4 -3,7 -7,7 H 52 V 6 h 5 c 4,0 7,3 7,7 z' style='fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' inkscape:connector-curvature='0')
    g#layer15(inkscape:groupmode='layer' inkscape:label='Arms' transform='translate(-0.17695185,5.8728103)')
    g#layer12(inkscape:groupmode='layer' inkscape:label='Head' transform='translate(-0.17695185,5.8728103)' style='display:inline')
      path#path188(inkscape:connector-curvature='0' d='M 54.982147,6.9706839 A 31.493507,30.388473 0 0 0 23.48864,37.360802 31.493507,30.388473 0 0 0 49.424618,67.243614 c 0.358852,-0.529013 0.654382,-1.126985 1.02222,-1.646205 2.208922,-3.117994 4.580632,-6.060048 7.10481,-8.829647 2.524177,-2.769599 5.201251,-5.367946 8.025568,-7.797281 2.824318,-2.429336 5.793862,-4.690537 8.903206,-6.787744 3.109344,-2.097205 6.358466,-4.030363 9.737723,-5.803571 0.701215,-0.367951 1.471504,-0.650254 2.183948,-1.004464 A 31.493507,30.388473 0 0 0 54.982147,6.9706839 Z' style='fill:#e9c6af;fill-opacity:1;stroke:none;stroke-width:7.79220772;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1')
      path#path194(inkscape:connector-curvature='0' style='fill:#e9c6af;fill-opacity:1;stroke:none;stroke-width:7.79220772;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' d='m 245.37176,6.9706839 a 31.493507,30.388473 0 0 1 31.49351,30.3901181 31.493507,30.388473 0 0 1 -25.93598,29.882812 c -0.35885,-0.529013 -0.65438,-1.126985 -1.02222,-1.646205 -2.20892,-3.117994 -4.58063,-6.060048 -7.10481,-8.829647 -2.52418,-2.769599 -5.20125,-5.367946 -8.02557,-7.797281 -2.82432,-2.429336 -5.79386,-4.690537 -8.90321,-6.787744 -3.10934,-2.097205 -6.35846,-4.030363 -9.73772,-5.803571 -0.70121,-0.367951 -1.4715,-0.650254 -2.18395,-1.004464 A 31.493507,30.388473 0 0 1 245.37176,6.9706839 Z')
      g#g244(transform='translate(-323.26452,-28.403996)')
        path#path182(inkscape:connector-curvature='0' style='fill:#e9c6af;fill-opacity:1;stroke:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' d='m 560.45446,240.47004 c 4e-5,27.97288 -39.53846,54.54549 -88.31169,54.54549 -48.77322,0 -85.71431,-26.57261 -85.71428,-54.54549 0,-27.97287 36.94109,-46.75325 85.71428,-46.75325 48.77321,0 88.31169,18.78038 88.31169,46.75325 z')
        path#path184(inkscape:connector-curvature='0' style='fill:#000000;fill-opacity:1;stroke:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' d='m 517.27264,203.45706 c 0,10.75878 -26.75291,34.41558 -42.53247,34.41558 -15.77957,0 -45.12987,-23.6568 -45.12987,-34.41558 0,-10.7588 29.3503,-17.53247 45.12987,-17.53247 15.77956,0 42.53247,6.77367 42.53247,17.53247 z')
        ellipse#ellipse198(style='fill:#000000;fill-opacity:1;stroke:none;stroke-width:4.05340338;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' cx='416.07867' cy='146.34923' rx='12.039111' ry='12.57025')
        ellipse#ellipse200(ry='12.57025' rx='12.039111' cy='146.34923' cx='521.36218' style='fill:#000000;fill-opacity:1;stroke:none;stroke-width:4.05340338;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1')

- const randomInRange = (max, min) => Math.floor(Math.random() * (max - min + 1)) + min
- const bears = 10
- const colorMap = new Array(bears).fill().reduce((a) => { return [...a,{lightness: randomInRange(20, 70), hue: randomInRange(0, 360)}]}, [])
.bears__container
  form.bears(style=`--bear-count: ${bears}`)
    label.instruction Tap a bear
    - let b = 0
    while b < bears
      - const { lightness, hue } = colorMap[b]
      - const { lightness: nextLightness, hue: nextHue } = colorMap[b + 1] ? colorMap[b+1] : colorMap[b]
      - if (b !== (bears - 1))
        input(id=`bear--${b}`, style=`--bear-index: ${b};`, type='checkbox')
      label.bear(for=`bear--${b}`, style=`--cursor: ${b !== bears - 1 ? 'pointer' : 'not-allowed'}; --lightness: ${lightness}; --shirt-hue: ${hue}; --scale: ${b === 0 ? 1 : 0}; --bear-index: ${b}; ${b === 0 ? 'display: block;' : ''}`)
        .bear.bear--dummy(style=`--lightness: ${nextLightness}; --shirt-hue: ${nextHue};`)
          .bear--dummy--top.bear--dummy--half
            +bear()
          .bear--dummy--bottom.bear--dummy--half
            +bear()
        .bear__half.bear__half--top
          +bear()
        .bear__half.bear__half--bottom
          +bear()
      - b++
    input(type='reset', id='reset')
    label(for='reset', title='Reset bears')
      svg(viewbox='0 0 24 24')
        path(d='M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z')

            
          
!
            
              *
  -webkit-tap-highlight-color transparent
  box-sizing border-box
  outline-color transparent

body
  align-items center
  background #fafafa
  display flex
  justify-content center
  min-height 100vh
  transform-style preserve-3d

:root
  --speed .25
  --scale-step 8
  --base-width 100
  --base-height calc(var(--base-width) * 1.83333333333)
  --slide-distance 60
  --pop-height 60
  --base-slide calc(var(--base-width) * 1)

  @media(min-width 768px)
    --base-width 200

.instruction
  font-weight bold
  position absolute
  right 1.5rem
  bottom 1.5rem
  color #ccc
  font-size 2rem
  font-variant small-caps
    
.bears
  align-items flex-end
  border-bottom 4px solid #aaa
  display flex
  height calc(var(--base-height) * 1px)
  justify-content center
  margin 0
  width calc(var(--base-width) * 2px)
  
  &__container
    position relative
    // max-width 600px
    width 100vw
    height 100vh
    display flex
    align-items center
    justify-content center

.bear
  --bear-color 'hsl(25, 80%, %s)' % (calc(var(--lightness) * 1%))
  --claw-color 'hsl(25, 80%, %s)' % (calc((var(--lightness) - 20) * 1%))
  --shirt-color 'hsl(%s, 50%, 50%)' % (var(--shirt-hue))
  --height calc((var(--base-height) * ((100 - (var(--bear-index) + 1) * var(--scale-step)) / 100)))
  --width calc((var(--base-width) * ((100 - (var(--bear-index) + 1) * var(--scale-step)) / 100)))
  --dummy-height calc((var(--base-height) * ((100 - (var(--bear-index) + 2) * var(--scale-step)) / 100)))
  --dummy-width calc((var(--base-width) * ((100 - (var(--bear-index) + 2) * var(--scale-step)) / 100)))
  height calc(var(--height) * 1px)
  display none
  position absolute
  transform-origin bottom center
  transition transform .25s ease
  width calc(var(--width) * 1px)
  z-index calc(var(--bear-count) - var(--bear-index))

  .bear-body
    fill var(--bear-color)

  .bear-shirt
    fill var(--shirt-color)

  .bear-claw
    fill var(--claw-color)

  .bear-foot
    stroke var(--claw-color)

  &--dummy
    bottom 0
    display block
    height 100%
    left 50%
    transform translate(-50%, 0) translate(0, 0)
    width 100%
    z-index auto

    &--half
      bottom 0
      height calc(var(--dummy-height) * .5px)
      left 50%
      overflow hidden
      position absolute
      transform translate(-50%, calc(var(--translation) * 1%))
      transform-origin bottom center
      width calc(var(--dummy-width) * 1px)
      z-index 2

    svg
      height 200%
      position absolute
      width 100%

    &--top
      --translation -100
      svg
        top 0

    &--bottom
      --translation 0
      svg
        bottom 0

  /**
   * Bear is actually used as a container
   * We use two half elements to mimic top and bottom
  */
  &__half
    height 50%
    left 50%
    overflow hidden
    position absolute
    right 0
    top 50%
    transform translate(-50%, calc(var(--translation) * 1%))
    width 100%

    svg
      height 200%
      position absolute
      width 100%

    &--top
      --translation -100

      svg
        top 0

    &--bottom
      --translation 0
      svg
        bottom 0

[type='checkbox']
[type='reset']
  display none

label
  cursor var(--cursor, 'pointer')

[for='reset']
  height 44px
  cursor pointer
  position absolute
  right 1.5rem
  top 1.5rem
  transition transform calc(var(--speed) * 1s) ease
  width 44px

  &:hover
    transform translate(0, -5%) scale(1.1)

    svg path
      fill #111

  svg
    height 44px
    width 44px

    path
      transition fill calc(var(--speed) * 1s) ease
      fill #aaaaaa
/**
 * A lot needs to happen when we check the box
 * 1. Disable clicking til animation finished
 * 2. Move the parent bear
 * 3. Reveal the baby bear
 * 4. Move the baby bear
 * 5. Show the real baby bear
 * 6. Show the new input
 * 7. Hide the dummy baby bear
 * 8. Fade out the parent bear
*/
input:checked
  /**
   * As soon as the input is checked, chain animations in forwards fill
   * for the container bear. This means scale up, slide left, open up
   * Reveal inner bear.
  */
  + .bear
    pointer-events none
    animation slideLeft calc(var(--speed) * 1s) forwards,
              slideOut calc(var(--speed) * 1s) calc(var(--speed) * 5s) forwards

    .bear__half--top
      transform-origin bottom left
      animation open calc(var(--speed) * 2s) calc(var(--speed) * 1s) forwards

    // Once the top has opened, move the dummy up and out and into the spot where it should be
    .bear--dummy
      animation popOut calc(var(--speed) * 1s) calc(var(--speed) * 2s) forwards,
                slideRight calc(var(--speed) * 1s) calc(var(--speed) * 3s) forwards,
                popDown calc(var(--speed) * 1s) calc(var(--speed) * 4s) forwards,
                disappear 0s calc(var(--speed) * 5s) forwards

    // Catches the last bear instance where there isn't an input
    + .bear
      display block
      animation appear 0s calc(var(--speed) * 5s) both

    + input
      &:checked + .bear
        animation slideLeft calc(var(--speed) * 1s) forwards,
                  slideOut calc(var(--speed) * 1s) calc(var(--speed) * 6s) forwards
      & + .bear
        display block
        animation appear 0s calc(var(--speed) * 5s) both

@keyframes disappear
  to
    transform scale(0)

@keyframes appear
  from
    transform scale(0)

@keyframes slideLeft
  to
    transform translate(calc((var(--base-slide) * -1px) + var(--slide-distance) * -1%), 0)

@keyframes slideOut
  from
    transform translate(calc((var(--base-slide) * -1px) + var(--slide-distance) * -1%), 0)
  to
    opacity 0
    transform translate(calc((var(--base-slide) * -1px) + var(--slide-distance) * -2%), 0)

@keyframes open
  0%
    transform translate(-50%, calc(var(--translation) * 1%)) translate(0, 0)
  {100 / 3%}
    transform translate(-50%, calc(var(--translation) * 1%)) translate(0, -100%)
  {100/ 3 * 2%}
    transform translate(-50%, calc(var(--translation) * 1%)) translate(-100%, -100%)
  100%
    transform translate(-50%, calc(var(--translation) * 1%)) translate(-100%, 100%)

@keyframes popOut
  to
    transform translate(-50%, calc(var(--pop-height) * -1%)) translate(0, 0)

@keyframes slideRight
  from
    transform translate(-50%, calc(var(--pop-height) * -1%)) translate(0, 0)
  to
    transform translate(-50%, calc(var(--pop-height) * -1%)) translate(calc((var(--base-slide) * 1px) + var(--slide-distance) * 1%), 0)

@keyframes popDown
  from
    transform translate(-50%, calc(var(--pop-height) * -1%)) translate(calc((var(--base-slide) * 1px) + var(--slide-distance) * 1%), 0)
  to
    transform translate(-50%, calc(var(--pop-height) * -1%)) translate(calc((var(--base-slide) * 1px) + var(--slide-distance) * 1%), calc(var(--pop-height) * 1%))
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console