"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[74666],{74666:(n,e,t)=>{t.r(e),t.d(e,{default:()=>l});var o=t(87687),i=t(75748);let r="import React from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nconst RotatingCard = ({\n  width,\n  height,\n  src,\n  alt,\n}) => (\n  <div style={{ perspective: 1000 }}>\n    <Wrapper\n      style={{\n        // This property's new ↓\n        transformStyle: 'preserve-3d',\n      }}\n    >\n      {/* Our image being rotated */}\n      <img\n        alt={alt}\n        src={src}\n        style={{\n          width,\n          height,\n          display: 'block',\n        }}\n      />\n\n      {/* Our backface */}\n      <div\n        style={{\n          // This property is also new ↓\n          backfaceVisibility: 'hidden',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          backgroundColor:\n            'hsla(0, 100%, 100%, 0.9)',\n        }}\n      />\n    </Wrapper>\n  </div>\n);\n\n////////////////////////////////////\n/* Relevant bits above this line */\n//////////////////////////////////\n\n// I'm using \"styled-components\" to do the CSS\n// rotation animation. This is how you specify\n// a CSS keyframes animation.\nconst rotationKeyframes = keyframes`\n  from {\n    transform: rotateY(0deg);\n  }\n\n  to {\n    transform: rotateY(360deg);\n  }\n`\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n\n  /*\n    We'll only enable the animation for folks\n    who have NOT ticked the “prefers-reduced-\n    motion” checkbox\n  */\n  @media (prefers-reduced-motion: no-preference) {\n    animation:\n      ${rotationKeyframes}\n      4000ms\n      linear\n      infinite;\n  }\n`\n\nexport default function App() {\n  return (\n    <RotatingCard\n      width={210}\n      height={280}\n      alt=\"A neon city at night\"\n      src=\"/img/city.jpg\"\n    />\n  );\n}\n",a={"our-mvp":"import React from 'react';\nimport styled from 'styled-components';\n\nconst FoldableImage = ({\n  width,\n  height,\n  src,\n}) => {\n  const [foldAngle, setFoldAngle] =\n    React.useState(0);\n\n  // Both our top half and bottom half share\n  // a few common styles\n  const sharedStyles = {\n    width,\n    height: height / 2,\n    backgroundSize: `${width}px ${height}px`,\n    backgroundImage: `url(${src})`,\n  };\n\n  return (\n    <div style={{ perspective: 500 }}>\n      {/* Top half */}\n      <div style={sharedStyles} />\n\n      {/* Bottom half */}\n      <div\n        style={{\n          ...sharedStyles,\n          // Shift our background up to\n          // make it contiguous with the\n          // top half:\n          backgroundPosition: `0px -100%`,\n\n          // Apply the folding rotation:\n          transform:\n            `rotateX(${foldAngle}deg)`,\n          transformOrigin: 'center top',\n\n          // This optional prop can improve\n          // performance, by letting the\n          // browser optimize it:\n          willChange: 'transform',\n        }}\n      />\n\n      {/* Slider control */}\n      <br />\n      <label htmlFor=\"slider\">\n        Fold ratio:\n      </label>\n      <input\n        id=\"slider\"\n        type=\"range\"\n        min={0}\n        max={180}\n        value={foldAngle}\n        onChange={ev =>\n          setFoldAngle(ev.target.value)\n        }\n        style={{ width }}\n      />\n    </div>\n  );\n};\n\nexport default function App() {\n  return (\n    <FoldableImage\n      width={200}\n      height={300}\n      src=\"/img/city.jpg\"\n    />\n  );\n}\n",a11y:"import React from 'react';\nimport styled from 'styled-components';\n\nconst FoldableImage = ({\n  width,\n  height,\n  src,\n  alt,\n}) => {\n  const [foldAngle, setFoldAngle] =\n    React.useState(0);\n\n  // Both our top half and bottom half share\n  // a few common styles\n  const sharedStyles = {\n    width,\n    height: height / 2,\n  };\n\n  return (\n    <div style={{ perspective: 500 }}>\n      {/* Top half */}\n      <div\n        style={{\n          ...sharedStyles,\n          // This property's new ↓\n          overflow: 'hidden',\n        }}\n      >\n        {/* This image is new ↓ */}\n        <img\n          src={src}\n          alt={alt}\n          style={{\n            width,\n            height,\n          }}\n        />\n      </div>\n\n      {/* Bottom half */}\n      <div\n        style={{\n          ...sharedStyles,\n\n          // Only the bottom half gets\n          // a bg-image\n          backgroundSize:\n            `${width}px ${height}px`,\n          backgroundImage:\n            `url(${src})`,\n\n          // Shift our background up to\n          // make it contiguous with the\n          // top half:\n          backgroundPosition: `0px -100%`,\n\n          // Apply the folding rotation:\n          transform:\n            `rotateX(${foldAngle}deg)`,\n          transformOrigin: 'center top',\n\n          // This optional prop can improve\n          // performance, by letting the\n          // browser optimize it:\n          willChange: 'transform',\n        }}\n      />\n\n      {/* Slider control */}\n      <br />\n      <label htmlFor=\"slider\">\n        Fold ratio:\n      </label>\n      <input\n        id=\"slider\"\n        type=\"range\"\n        min={0}\n        max={180}\n        value={foldAngle}\n        onChange={ev =>\n          setFoldAngle(ev.target.value)\n        }\n        style={{ width }}\n      />\n    </div>\n  );\n};\n\nexport default function App() {\n  return (\n    <FoldableImage\n      width={200}\n      height={300}\n      alt=\"A neon city at night\"\n      src=\"/img/city.jpg\"\n    />\n  );\n}\n",backface:"import React from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nconst RotatingCard = ({\n  width,\n  height,\n  src,\n  alt,\n}) => (\n  <div style={{ perspective: 1000 }}>\n    <Wrapper>\n      {/* Our image being rotated */}\n      <img\n        alt={alt}\n        src={src}\n        style={{\n          width,\n          height,\n          display: 'block',\n        }}\n      />\n\n      {/* Our backface */}\n      <div\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          backgroundColor:\n            'hsla(0, 100%, 100%, 0.9)'\n        }}\n      />\n    </Wrapper>\n  </div>\n)\n\n////////////////////////////////////\n/* Relevant bits above this line */\n//////////////////////////////////\n\n// I'm using \"styled-components\" to do the CSS\n// rotation animation. This is how you specify\n// a CSS keyframes animation.\nconst rotationKeyframes = keyframes`\n  from {\n    transform: rotateY(0deg);\n  }\n\n  to {\n    transform: rotateY(360deg);\n  }\n`\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n\n  /*\n    We'll only enable the animation for folks\n    who have NOT ticked the “prefers-reduced-\n    motion” checkbox\n  */\n  @media (prefers-reduced-motion: no-preference) {\n    animation:\n      ${rotationKeyframes}\n      4000ms\n      linear\n      infinite;\n  }\n`\n\nexport default function App() {\n  return (\n    <RotatingCard\n      width={210}\n      height={280}\n      alt=\"A neon city at night\"\n      src=\"/img/city.jpg\"\n    />\n  );\n}\n","backface-hidden":r,"backface-fixed":r,combined:"import React from 'react';\nimport styled from 'styled-components';\n\nconst FoldableImage = ({\n  width,\n  height,\n  src,\n  alt,\n}) => {\n  const [\n    foldAngle,\n    setFoldAngle,\n  ] = React.useState(0);\n\n  // Both our top half and bottom\n  // half share a few common styles\n  const sharedStyles = {\n    width,\n    height: height / 2,\n  };\n\n  return (\n    <div style={{ perspective: 500 }}>\n      {/* Top half */}\n      <div\n        style={{\n          ...sharedStyles,\n          overflow: 'hidden',\n        }}\n      >\n        <img\n          src={src}\n          alt={alt}\n          style={{\n            width,\n            height,\n          }}\n        />\n      </div>\n\n      {/* Bottom half */}\n      <div\n        style={{\n          ...sharedStyles,\n          backgroundSize:\n            `${width}px ${height}px`,\n          backgroundImage:\n            `url(${src})`,\n          backgroundPosition:\n            `0px -100%`,\n          transform:\n            `rotateX(${foldAngle}deg)`,\n          transformOrigin: 'center top',\n          willChange: 'transform',\n          // This property is new ↓\n          transformStyle: 'preserve-3d',\n        }}\n      >\n        {/* This child is new ↓ */}\n        <div\n          style={{\n            position: 'absolute',\n            inset: 0,\n            background:\n              'hsla(0, 100%, 100%, 0.9)',\n            backfaceVisibility: 'hidden',\n            transform:\n              'rotateX(180deg) translateZ(.5px)',\n          }}\n        />\n      </div>\n\n      {/* Slider control */}\n      <br />\n      <label htmlFor=\"slider\">\n        Fold ratio:\n      </label>\n      <input\n        id=\"slider\"\n        type=\"range\"\n        min={0}\n        max={180}\n        value={foldAngle}\n        onChange={ev =>\n          setFoldAngle(ev.target.value)\n        }\n        style={{ width }}\n      />\n    </div>\n  );\n};\n\nexport default function App() {\n  return (\n    <FoldableImage\n      width={200}\n      height={300}\n      src=\"/img/city.jpg\"\n      alt=\"A neon city at night\"\n    />\n  );\n}\n"},l=function(n){let{variant:e}=n;return(0,o.jsx)(i.default,{isLazy:!0,layout:"split",splitRatio:.625,minPreviewHeight:"12rem",dependencies:{"styled-components":"6.1.8"},files:{"/App.js":a[e],"/styles.css":{hidden:!0,code:"\n#root > div {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n          "}}})}}}]);
//# sourceMappingURL=74666.565d1fdfa8227561.js.map