- const URL = ''
//- Front
//- Back
//- Right
//- Left
//- Top
//- Bottom
mixin cuboid(className)
.cuboid(class=className)
- let s = 0
while s < 6
.cuboid__side
- s++
audio.ambience(src="https://assets.codepen.io/605876/loyalty-freak-music_everyone.mp3" muted playsinline autoplay loop)
input#zoom(type='checkbox')
label(for="zoom" title="Toggle zoom")
svg(viewBox="0 0 24 24")
path(d="M15.5,14L20.5,19L19,20.5L14,15.5V14.71L13.73,14.43C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.43,13.73L14.71,14H15.5M9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14M12,10H10V12H9V10H7V9H9V7H10V9H12V10Z")
svg(viewBox="0 0 24 24")
path(d="M15.5,14H14.71L14.43,13.73C15.41,12.59 16,11.11 16,9.5A6.5,6.5 0 0,0 9.5,3A6.5,6.5 0 0,0 3,9.5A6.5,6.5 0 0,0 9.5,16C11.11,16 12.59,15.41 13.73,14.43L14,14.71V15.5L19,20.5L20.5,19L15.5,14M9.5,14C7,14 5,12 5,9.5C5,7 7,5 9.5,5C12,5 14,7 14,9.5C14,12 12,14 9.5,14M7,9H12V10H7V9Z")
input#audio(type='checkbox')
label(for="audio" title="Toggle audio")
svg(viewBox="0 0 24 24")
path(d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z")
svg(viewBox="0 0 24 24")
path(d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z")
input#dark(type='checkbox')
label(for="dark" title="Toggle light")
svg(viewBox="0 0 24 24")
path(d="M9,2C7.95,2 6.95,2.16 6,2.46C10.06,3.73 13,7.5 13,12C13,16.5 10.06,20.27 6,21.54C6.95,21.84 7.95,22 9,22A10,10 0 0,0 19,12A10,10 0 0,0 9,2Z")
svg(viewBox="0 0 24 24")
path(d="M3.55,18.54L4.96,19.95L6.76,18.16L5.34,16.74M11,22.45C11.32,22.45 13,22.45 13,22.45V19.5H11M12,5.5A6,6 0 0,0 6,11.5A6,6 0 0,0 12,17.5A6,6 0 0,0 18,11.5C18,8.18 15.31,5.5 12,5.5M20,12.5H23V10.5H20M17.24,18.16L19.04,19.95L20.45,18.54L18.66,16.74M20.45,4.46L19.04,3.05L17.24,4.84L18.66,6.26M13,0.55H11V3.5H13M4,10.5H1V12.5H4M6.76,4.84L4.96,3.05L3.55,4.46L5.34,6.26L6.76,4.84Z")
input#spin(type='checkbox')
label(for="spin" title="Toggle chair spin")
svg(viewBox="0 0 24 24")
path(d="M8,5.14V19.14L19,12.14L8,5.14Z")
svg(viewBox="0 0 24 24")
path(d="M18,18H6V6H18V18Z")
.scene__wrapper
.scene
//- Plane that all the 3D stuff sits on
.plane
.studio
+cuboid('floor')
+cuboid('rug')
+cuboid('wall wall--left')
.window
+cuboid('window__frame window__frame--top')
+cuboid('window__frame window__frame--left')
+cuboid('window__frame window__frame--right')
+cuboid('window__frame window__frame--bottom')
+cuboid('window__frame window__frame--middle')
.blinds
- let b = 0
while b < 11
.blind(style=`--index: ${b}`)
- b++
+cuboid('wall wall--right-left')
+cuboid('wall wall--right-upper')
+cuboid('wall wall--right-right')
+cuboid('skirting skirting--left')
+cuboid('skirting skirting--right')
+cuboid('windowsill')
+cuboid('wall wall--right-lower')
+cuboid('jfdi')
+cuboid('shelf')
.plant
img.plant__plant(src="https://assets.codepen.io/605876/plant.png?width=204&height=306&format=auto")
img.plant__plant(src="https://assets.codepen.io/605876/plant.png?width=204&height=306&format=auto")
img.plant__plant(src="https://assets.codepen.io/605876/plant.png?width=204&height=306&format=auto")
+cuboid('plant__pot')
+cuboid('light-cube')
.desk
.desk__shadow.desk__shadow--floor
//- .desk__shadow.desk__shadow--wall
+cuboid('desk__leg desk__leg--left')
+cuboid('desk__leg desk__leg--right')
+cuboid('desk__leg desk__leg--bottom-left')
+cuboid('desk__leg desk__leg--bottom-right')
+cuboid('mac')
+cuboid('desk__top')
+cuboid('monitor__arm monitor__arm--main')
+cuboid('monitor__arm monitor__arm--portrait')
.cuboid.monitor.monitor--main
.cuboid__side
.cuboid__side
.cuboid__side
iframe(src="https://tylerjdoyle.myportfolio.com/")
.cuboid__side
.cuboid__side
.cuboid__side
.cuboid.monitor.monitor--portrait
.cuboid__side
.cuboid__side
.cuboid__side
iframe(src="https://tylerjdoyle.myportfolio.com/animated-loops-gradient")
.cuboid__side
.cuboid__side
.cuboid__side
.keyboard__base
.mousemat
+cuboid('mouse')
+cuboid('keyboard')
+cuboid('keyboard__keys')
+cuboid('studio-light__stand')
+cuboid('studio-light')
+cuboid('bear-canvas')
.chair__base
.chair__shadow
+cuboid('chair__wheel chair__wheel--one')
+cuboid('chair__wheel chair__wheel--two')
+cuboid('chair__wheel chair__wheel--three')
+cuboid('chair__wheel chair__wheel--four')
+cuboid('chair__wheel chair__wheel--five')
+cuboid('chair__leg chair__leg--one')
+cuboid('chair__leg chair__leg--two')
+cuboid('chair__leg chair__leg--three')
+cuboid('chair__leg chair__leg--four')
+cuboid('chair__leg chair__leg--five')
+cuboid('chair__spine')
.chair__top
+cuboid('chair__seat')
+cuboid('chair__wing chair__wing--left')
+cuboid('chair__wing chair__wing--right')
+cuboid('chair__back')
+cuboid('chair__headrest')
+cuboid('chair__armrest chair__armrest--vertical chair__armrest--vertical--left')
+cuboid('chair__armrest chair__armrest--vertical chair__armrest--vertical--right')
+cuboid('chair__armrest chair__armrest--horizontal chair__armrest--horizontal--left')
+cuboid('chair__armrest chair__armrest--horizontal chair__armrest--horizontal--right')
*
box-sizing border-box
transform-style preserve-3d
:root
--blur 1vmin
--perspective 2000
--rotate-x -20
--rotate-y -45
--plane-height 50
--plane-width 50
--dark 0
--zoomed 0
--scale calc(1 + (var(--zoomed) * 4))
--wall-thickness 4
--cm calc((var(--plane-height) / 240))
--transition 0.2s
// Colors
--floor-shade-one hsl(30, 40%, 40%)
--floor-shade-two hsl(30, 40%, 60%)
--floor-shade-three hsl(30, 40%, 80%)
--windowsill-shade-one hsl(35, 50%, 50%)
--windowsill-shade-two hsl(35, 50%, 40%)
--windowsill-shade-three hsl(35, 50%, 30%)
--wall-shade-one hsl(0, 0%, 98%)
--wall-shade-two hsl(0, 0%, 95%)
--wall-shade-three hsl(0, 0%, 90%)
--wall-shade-four hsl(0, 0%, 85%)
--skirting-one hsl(0, 0%, 93%)
--skirting-two hsl(0, 0%, 88%)
--fade-one hsl(0, 80%, 85%)
--fade-two hsl(200, 80%, 85%)
--fade-three hsl(280, 80%, 85%)
--fade-four hsl(120, 80%, 85%)
--cube hsl(0, 0%, 95%)
--leg-one hsl(0, 0%, 10%)
--leg-two hsl(0, 0%, 12%)
--leg-three hsl(0, 0%, 14%)
--leg-four hsl(0, 0%, 16%)
--rug hsl(210, 40%, 10%)
--peripheral-one hsl(0, 0%, 20%)
--peripheral-two hsl(0, 0%, 30%)
--peripheral-three hsl(0, 0%, 40%)
--peripheral-four hsl(0, 0%, 50%)
--mac-one hsl(0, 0%, 80%)
--mac-two hsl(0, 0%, 70%)
--blind hsl(30, 50%, 90%)
--mac-three hsl(0, 0%, 60%)
--pot-one hsl(20, 50%, 50%)
--pot-two hsl(20, 50%, 40%)
--pot-three hsl(20, 50%, 30%)
--chair-one hsl(0, 0%, 0%)
--chair-two hsl(0, 0%, 10%)
--chair-three hsl(0, 0%, 15%)
--chair-four hsl(0, 0%, 20%)
--chair-accent-one hsl(0, 0%, 20%)
--chair-accent-two hsl(0, 0%, 50%)
--bg hsl(200, 100%, 70%)
--light hsl(0, 0%, 80%)
--icon hsl(0, 100%, 100%)
// We're saying that 50vmin === 240cm
audio
display none
body
min-height 100vh
overflow hidden
.dg.ac
z-index 100
transform translate3d(0, 0, 50vmin)
// Interactions
[type="checkbox"]
position absolute
left 100%
opacity 0
height 0
width 0
label
position fixed
z-index 100
right 1rem
bottom 1rem
border-radius 50%
height 44px
width 44px
cursor pointer
transform translate3d(0, 0, 50vmin) translate(0, calc((var(--index) * -100%) + (var(--index) * -10px)))
svg
height 28px
width 28px
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
path
fill var(--icon)
[for='spin']
--index 0
[for='dark']
--index 1
[for='audio']
--index 2
[for='zoom']
--index 3
#spin:checked ~ .scene__wrapper
--spin 1
#zoom:checked ~ .scene__wrapper
--zoomed 1
--scale 4.75
#zoom:checked ~ label:not([for='zoom'])
display none
#zoom:checked + label
background hsl(0, 0%, 100%)
#dark:checked ~ .scene__wrapper
.light-cube div
.light-cube:after
animation fade 10s calc(2 * var(--transition)) infinite linear
@keyframes fade
0%, 100%
background var(--fade-one)
25%
background var(--fade-two)
50%
background var(--fade-three)
75%
background var(--fade-four)
.light-cube:after
filter blur(var(--blur))
.wall--left div:nth-of-type(3):after
opacity 1
.wall--right-right div:nth-of-type(1):after
.shelf div:nth-of-type(5):after
animation fade 10s calc(2 * var(--transition)) infinite linear
.jfdi div:nth-of-type(3):after
color hsl(0, 0%, 80%)
.jfdi div:nth-of-type(4):after
transition transform var(--transition) var(--transition)
transform translate(-8%, -16%)
.windowsill div:nth-of-type(1)
.windowsill div:nth-of-type(5)
.floor div:nth-of-type(5)
filter brightness(0.25)
.plant__plant
filter brightness(0.5)
.chair__back div:nth-of-type(3):after
filter brightness(0.25)
.desk__top div:nth-of-type(1)
filter brightness(0.1)
.desk__top div:nth-of-type(3)
filter brightness(0.3)
.desk__top div:nth-of-type(5)
filter brightness(0.2)
.bear-canvas div
filter brightness(0.35)
.bear-canvas div:nth-of-type(1)
filter brightness(0.35) grayscale(1)
.rug div:nth-of-type(5)
filter brightness(0.25)
#zoom:checked ~ .scene__wrapper
.scene
.studio
.plane
transition transform var(--transition)
.chair
transition opacity var(--transition)
// Flip switches plus colors
#dark:checked ~ .scene__wrapper
--dark 1
--floor-shade-one hsl(30, 40%, 10%)
--floor-shade-two hsl(30, 40%, 20%)
--floor-shade-three hsl(30, 40%, 30%)
--windowsill-shade-one hsl(35, 50%, 30%)
--windowsill-shade-two hsl(35, 50%, 20%)
--windowsill-shade-three hsl(35, 50%, 10%)
--wall-shade-one hsl(0, 0%, 38%)
--wall-shade-two hsl(0, 0%, 35%)
--wall-shade-three hsl(0, 0%, 30%)
--wall-shade-four hsl(0, 0%, 25%)
--skirting-one hsl(0, 0%, 33%)
--skirting-two hsl(0, 0%, 28%)
--fade-one hsl(0, 80%, 85%)
--fade-two hsl(200, 80%, 85%)
--fade-three hsl(280, 80%, 85%)
--fade-four hsl(120, 80%, 85%)
--leg-one hsl(0, 0%, 5%)
--leg-two hsl(0, 0%, 6%)
--leg-three hsl(0, 0%, 7%)
--leg-four hsl(0, 0%, 8%)
--rug hsl(210, 40%, 10%)
--peripheral-one hsl(0, 0%, 10%)
--peripheral-two hsl(0, 0%, 15%)
--peripheral-three hsl(0, 0%, 20%)
--peripheral-four hsl(0, 0%, 25%)
--mac-one hsl(0, 0%, 20%)
--mac-two hsl(0, 0%, 18%)
--mac-three hsl(0, 0%, 15%)
--pot-one hsl(20, 50%, 30%)
--pot-two hsl(20, 50%, 20%)
--blind hsl(30, 50%, 20%)
--pot-three hsl(20, 50%, 10%)
--chair-one hsl(0, 0%, 0%)
--chair-two hsl(0, 0%, 5%)
--chair-three hsl(0, 0%, 10%)
--chair-four hsl(0, 0%, 15%)
--chair-accent-one hsl(0, 0%, 40%)
--chair-accent-two hsl(0, 60%, 30%)
--bg hsl(210, 80%, 10%)
--cube hsl(0, 0%, 40%)
--light hsl(0, 0%, 100%)
--icon hsl(210, 80%, 30%)
:checked + label svg:last-of-type
display block
:checked + label svg:first-of-type
display none
label svg:last-of-type
display none
.scene
perspective calc(var(--perspective, 800) * 1px)
transform-style preserve-3d
height 100vh
width 100vw
display flex
align-items center
justify-content center
transform scale(var(--scale)) translate3d(0, 0, 50vmin)
&__wrapper
transition background var(--transition)
background var(--bg)
.plane
height calc(var(--plane-height, 25) * 1vmin)
width calc(var(--plane-width, 25) * 1vmin)
transform-style preserve-3d
transform rotateX(calc((var(--rotate-x, -24) - (var(--zoomed) * var(--rotate-x, -24))) * 1deg)) rotateY(calc(((var(--rotate-y, -24) - (var(--zoomed) * var(--rotate-y, -24))) + (var(--zoomed) * -90)) * 1deg)) rotateX(90deg) translate3d(0, 0, 0)
&:before
content ''
background hsla(0, 0%, 0%, 0.5)
filter blur(var(--blur))
height 112%
width 112%
position absolute
top -8%
left -10%
transform translate3d(0, 0, -11vmin)
z-index -1
// This is what makes the CSS variable powered cuboid
.cuboid
--width var(--cuboid-width, 15)
--height var(--cuboid-height, 10)
--depth var(--cuboid-depth, 4)
height calc(var(--depth) * 1vmin)
width calc(var(--width) * 1vmin)
position absolute
transform rotateZ(calc(var(--starting-rotation, 0) * 1deg)) translate3d(calc(var(--x, 0) * 1vmin), calc(var(--y, 0) * 1vmin), calc(var(--z, 0) * 1vmin)) rotateX(calc(var(--rotate-cuboid-x, 0) * 1deg)) rotateY(calc(var(--rotate-cuboid-y, 0) * 1deg)) rotateZ(calc(var(--rotate-cuboid-z, 0) * 1deg))
transform-style preserve-3d
&__side
transform-style preserve-3d
& > div:nth-of-type(1)
height calc(var(--height) * 1vmin)
width 100%
transform-origin 50% 50%
position absolute
top 50%
left 50%
transform translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin))
& > div:nth-of-type(2)
height calc(var(--height) * 1vmin)
width 100%
transform-origin 50% 50%
transform translate(-50%, -50%) rotateX(-90deg) rotateY(180deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin))
position absolute
top 50%
left 50%
& > div:nth-of-type(3)
height calc(var(--height) * 1vmin)
width calc(var(--depth) * 1vmin)
transform translate(-50%, -50%) rotateX(-90deg) rotateY(90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin))
position absolute
top 50%
left 50%
& > div:nth-of-type(4)
height calc(var(--height) * 1vmin)
width calc(var(--depth) * 1vmin)
transform translate(-50%, -50%) rotateX(-90deg) rotateY(-90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin))
position absolute
top 50%
left 50%
& > div:nth-of-type(5)
height calc(var(--depth) * 1vmin)
width calc(var(--width) * 1vmin)
transform translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * 1vmin))
position absolute
top 50%
left 50%
& > div:nth-of-type(6)
height calc(var(--depth) * 1vmin)
width calc(var(--width) * 1vmin)
transform translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * -1vmin)) rotateX(180deg)
position absolute
top 50%
left 50%
.studio
height 100%
width 100%
transform translate3d(0, 0, calc((-10 + (var(--zoomed) * -10)) * 1vmin))
.floor
--height 1
--width calc(50 + var(--wall-thickness))
--depth calc(50 + var(--wall-thickness))
--z -0.5
--y calc(var(--wall-thickness) * -1)
--x calc(var(--wall-thickness) * -1)
transition background var(--transition)
div:not(.studio__shadow)
background var(--floor-shade-three)
div:nth-of-type(1)
background var(--floor-shade-one)
div:nth-of-type(3)
background var(--floor-shade-two)
div:nth-of-type(5)
transition filter var(--transition)
filter brightness(1)
&:after
content ''
position absolute
top 0
left 0
height 100%
width 100%
transform rotate(90deg)
background url('https://images.pexels.com/photos/235994/pexels-photo-235994.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260') 0 0 / 15vmin 15vmin
.wall
transition background var(--transition)
&--left
--height calc(220 * var(--cm))
--width var(--wall-thickness)
--depth calc((240 * var(--cm)) + var(--wall-thickness))
--z calc(110 * var(--cm))
--x calc(var(--wall-thickness) * -1)
--y calc(var(--wall-thickness) * -1)
div
&:nth-of-type(1)
background var(--wall-shade-four)
&:nth-of-type(2)
background var(--wall-shade-one)
&:nth-of-type(3)
background var(--wall-shade-one)
overflow hidden
&:before
content ''
position absolute
top 0
left 0
height 100%
width 100%
overflow hidden
filter blur(var(--blur))
background radial-gradient(hsla(0, 0%, 0%, 0.5), transparent 100%) 80% 64% / 20% 35% no-repeat,
radial-gradient(hsla(0, 0%, 0%, 0.5), transparent 100%) 45% 58% / 45% 20% no-repeat,
radial-gradient(rgba(0,0,0,0.5), transparent 100%) 36% 100%/64% 30% no-repeat
&:after
content ''
position absolute
top 0
left 0
height 80%
width 80%
overflow hidden
filter blur(var(--blur))
transform rotate(41deg) translate(-18%, -36%)
opacity 0
transition opacity var(--transition) var(--transition)
background radial-gradient(circle at 50% 100%, hsla(45, 50%, 90%, 0.85), transparent 60%)
&:nth-of-type(5)
background var(--wall-shade-three)
&:nth-of-type(4)
&:nth-of-type(6)
background var(--wall-shade-two)
&--right-lower
--height calc(100 * var(--cm))
--width 50
--depth var(--wall-thickness)
--z calc(50 * var(--cm))
--y calc(var(--wall-thickness) * -1)
&:after
content ''
height 30%
width calc((114 * var(--cm)) * 1vmin)
top 102%
left calc((22 * var(--cm)) * 1vmin)
filter blur(calc(0.75 * var(--blur)))
background hsla(0, 0%, 0%, 0.5)
position absolute
transform-origin 50% 0
transform rotateX(90deg) translate(0, calc((44 * var(--cm)) * 1vmin))
div
background var(--wall-shade-four)
&:nth-of-type(5)
background var(--wall-shade-three)
&:nth-of-type(2)
&:nth-of-type(3)
background var(--wall-shade-one)
&--right-left
--height calc(220 * var(--cm))
--width calc(22 * var(--cm))
--depth var(--wall-thickness)
--z calc(110 * var(--cm))
--y calc(var(--wall-thickness) * -1)
div
background var(--wall-shade-four)
&:nth-of-type(3)
background var(--wall-shade-two)
&:nth-of-type(2)
background var(--wall-shade-one)
&--right-upper
--height calc(22 * var(--cm))
--width calc(240 * var(--cm))
--depth var(--wall-thickness)
--z calc(209 * var(--cm))
--y calc(var(--wall-thickness) * -1)
div
background var(--wall-shade-four)
&:nth-of-type(2)
&:nth-of-type(3)
background var(--wall-shade-one)
&:nth-of-type(5)
background var(--wall-shade-three)
&--right-right
--height calc(220 * var(--cm))
--width calc((240 - 136) * var(--cm))
--depth var(--wall-thickness)
--z calc(110 * var(--cm))
--y calc(var(--wall-thickness) * -1)
--x calc(136 * var(--cm))
div
background var(--wall-shade-four)
&:nth-of-type(1):after
content ''
position absolute
height 24%
width 70%
border-radius 50%
background none
filter blur(calc(2 * var(--blur)))
top 15%
left 15%
opacity 0.75
&:nth-of-type(2)
&:nth-of-type(3)
background var(--wall-shade-one)
&:nth-of-type(4)
background var(--wall-shade-four)
&:nth-of-type(5)
background var(--wall-shade-three)
.windowsill
--height calc(2 * var(--cm))
--depth calc(22 * var(--cm))
--width calc(114 * var(--cm))
--z calc(100 * var(--cm) )
--x calc(22 * var(--cm))
--y calc(var(--wall-thickness) * -0.8)
div
background var(--windowsill-shade-one)
&:nth-of-type(1)
transition filter var(--transition)
filter brightness(0.5)
background url("https://images.pexels.com/photos/172276/pexels-photo-172276.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500")
&:nth-of-type(2)
background var(--wall-shade-one)
&:nth-of-type(5)
transition filter var(--transition)
background url("https://images.pexels.com/photos/172276/pexels-photo-172276.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500")
&:nth-of-type(6)
background var(--windowsill-shade-three)
.studio-light
--width calc(4 * var(--cm))
--height calc(15 * var(--cm))
--depth calc(30 * var(--cm))
--z calc(146 * var(--cm))
--rotate-cuboid-z 20
--rotate-cuboid-x 30
--rotate-cuboid-y 45
top 86%
left 15%
margin-top calc((-15 * var(--cm)) * 1vmin)
div
background var(--peripheral-four)
transition background var(--transition)
&:nth-of-type(4)
background var(--light)
transition background var(--transition) var(--transition)
&:nth-of-type(5)
background var(--peripheral-two)
&:nth-of-type(3)
background var(--peripheral-one)
&__stand
--width calc(3 * var(--cm))
--depth calc(3 * var(--cm))
--height calc(80 * var(--cm))
--z calc(100 * var(--cm))
top 85%
left 15%
div
background var(--peripheral-four)
&:nth-of-type(1)
background var(--peripheral-one)
&:nth-of-type(3)
background var(--peripheral-three)
.desk
height calc((180 * var(--cm)) * 1vmin)
width calc((68 * var(--cm)) * 1vmin)
top calc((30 * var(--cm)) * 1vmin)
left calc((0 * var(--cm)) * 1vmin)
position absolute
&__shadow
background hsla(0, 0%, 0%, 0.5)
filter blur(var(--blur))
position absolute
&--floor
background radial-gradient(circle at 0 50%, hsla(0, 0%, 0%, 0.35) 50%, transparent 80%)
height 110%
width 80%
top 5%
&__leg
--width calc(8 * var(--cm))
--depth calc(5 * var(--cm))
--height calc(64 * var(--cm))
--z calc(32 * var(--cm))
--x calc(20 * var(--cm))
&--right
--y calc(15 * var(--cm))
&--left
--y calc(160 * var(--cm))
&--bottom-right
--width calc(50 * var(--cm))
--height calc(2 * var(--cm))
--y calc(15 * var(--cm))
--x calc(5 * var(--cm))
--z calc(1 * var(--cm))
&--bottom-left
--width calc(50 * var(--cm))
--height calc(2 * var(--cm))
--x calc(5 * var(--cm))
--y calc(160 * var(--cm))
--z calc(1 * var(--cm))
div
transition background var(--transition)
background var(--leg-one)
&:nth-of-type(1)
background var(--leg-two)
&__top
--height calc(4 * var(--cm))
--width calc(68 * var(--cm))
--depth calc(180 * var(--cm))
--z calc(64 * var(--cm))
div
background url('https://images.freecreatives.com/wp-content/uploads/2015/04/1black_wood_-grain-texture_11-1024x647.jpg') 0 0 / 20vmin 30vmin
transition filter var(--transition), background var(--transition)
&:nth-of-type(1)
filter brightness(0.25)
&:nth-of-type(5)
filter brightness(0.5)
&:nth-of-type(6)
background var(--floor-shade-three)
.jfdi
--height calc(40 * var(--cm))
--width calc(3 * var(--cm))
--depth calc(60 * var(--cm))
--y calc(90 * var(--cm))
--x var(--cm)
--z calc(190 * var(--cm))
div
background black
&:nth-of-type(4):after
content ''
background hsla(0, 0%, 0%, 0.5)
position absolute
top 8%
left 4%
height 100%
width 100%
transition transform var(--transition)
filter blur(var(--blur))
&:nth-of-type(3)
background hsl(0, 0%, 15%)
&:nth-of-type(3):after
transition color var(--transition)
content ''
background url('https://assets.codepen.io/7773162/svgviewer-output+%282%29.svg')
background-size cover
position absolute
top 0
left 0
height 100%
width 100%
color hsl(0, 0%, 100%)
font-weight bold
font-family sans-serif
font-size calc((21 * var(--cm)) * 1vmin)
text-align center
line-height calc((40 * var(--cm) * 1vmin))
.shelf
--height calc(5 * var(--cm))
--depth calc(26 * var(--cm))
--width calc(60 * var(--cm))
--z calc(144 * var(--cm))
--y var(--cm)
--x calc(170 * var(--cm))
div
background var(--wall-shade-three)
&:nth-of-type(5)
background var(--wall-shade-one)
overflow hidden
&:after
content ''
height 200%
border-radius 50%
width 100%
position absolute
left 50%
top 50%
filter blur(calc(2 * var(--blur)))
transform translate(-80%, -50%)
&:nth-of-type(3)
background var(--wall-shade-two)
&:nth-of-type(2):after
content ''
width 100%
height 250%
position absolute
top 110%
left 4%
background hsla(0, 0%, 0%, 0.5)
transform-origin 50% 0
transform skewX(-5deg)
filter blur(var(--blur))
.light-cube
--height calc(15 * var(--cm))
--width calc(15 * var(--cm))
--depth calc(15 * var(--cm))
--z calc(155 * var(--cm))
--x calc(180 * var(--cm))
--y calc(5 * var(--cm))
--rotate-cuboid-z 40
div
background var(--wall-shade-one)
&:nth-of-type(1)
background var(--wall-shade-three)
&:nth-of-type(3)
background var(--wall-shade-two)
.skirting
&--left
--height calc(8 * var(--cm))
--width calc(2 * var(--cm))
--depth calc(240 * var(--cm))
--z calc(4 * var(--cm))
div
background var(--skirting-one)
&:nth-of-type(3)
background var(--skirting-one)
&:after
content ''
position absolute
top 0
left 0
height 100%
width 100%
filter blur(var(--blur))
background radial-gradient(circle at 50% 50%, hsla(0, 0%, 0%, 0.5) 0 75%, transparent) 40% 0 / 70% 150% no-repeat
&:nth-of-type(5)
background linear-gradient(transparent, hsla(0, 0%, 0%, 0.5), transparent) 0 50% / 100% 70% no-repeat, var(--skirting-one)
&--right
--height calc(8 * var(--cm))
--width calc(240 * var(--cm))
--depth calc(2 * var(--cm))
--z calc(4 * var(--cm))
div
background var(--skirting-two)
.rug
--height calc(1 * var(--cm))
--width calc(140 * var(--cm))
--depth calc(140 * var(--cm))
--x calc(80 * var(--cm))
--y calc(50 * var(--cm))
--z calc(0.5 * var(--cm))
div
background var(--rug)
&:nth-of-type(5)
transition filter var(--transition)
filter brightness(1)
background url('https://images.pexels.com/photos/3707669/pexels-photo-3707669.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')
background-size cover
.monitor
&--main
--width calc(3 * var(--cm))
--depth calc(86 * var(--cm))
--height calc(36 * var(--cm))
--z calc(106 * var(--cm))
--y calc(-43 * var(--cm))
--x calc(10 * var(--cm))
top 50%
&--portrait
--depth calc(34 * var(--cm))
--width calc(3 * var(--cm))
--height calc(56 * var(--cm))
--z calc(104 * var(--cm))
--x calc(20 * var(--cm))
--rotate-cuboid-z 30
top 8%
div
background var(--peripheral-one)
&:nth-of-type(3)
&:nth-of-type(5)
background var(--peripheral-four)
&:nth-of-type(2)
background var(--peripheral-three)
iframe
position absolute
height 800%
width 800%
top 50%
left 50%
transform translate(-50%, -50%) scale(0.125)
&__arm
--width calc(4 * var(--cm))
--depth calc(4 * var(--cm))
--height calc(30 * var(--cm))
--z calc(80 * var(--cm))
&--main
--x calc(6 * var(--cm))
top 65%
&--portrait
--x calc(20 * var(--cm))
--rotate-cuboid-z 30
top 10%
div
background var(--peripheral-four)
&:nth-of-type(3)
&:nth-of-type(5)
background var(--peripheral-four)
&:nth-of-type(1)
background var(--peripheral-one)
.mac
--width calc(20 * var(--cm))
--height calc(5 * var(--cm))
--depth calc(20 * var(--cm))
--z calc(60 * var(--cm))
--x calc(44 * var(--cm))
top 10%
div
background var(--mac-three)
&:nth-of-type(1)
background var(--mac-one)
&:nth-of-type(3)
background var(--mac-two)
.keyboard
--depth calc(38 * var(--cm))
--width calc(14 * var(--cm))
--height calc(2 * var(--cm))
--z calc(1 * var(--cm))
div
background var(--peripheral-two)
&:nth-of-type(1)
background var(--peripheral-one)
&__keys
--depth calc(36 * var(--cm))
--width calc(12 * var(--cm))
--height calc(3 * var(--cm))
--z calc(1.5 * var(--cm))
--x calc(1 * var(--cm))
--y calc(1 * var(--cm))
div
background hsl(0, 0%, 60%)
&:nth-of-type(5):after
content ''
position absolute
top 0%
left 0%
transform-origin 0% 0%
width calc((36 * var(--cm)) * 1vmin)
height calc((12 * var(--cm)) * 1vmin)
transform rotate(270deg) translate(-100%, 0%)
background url('https://assets.codepen.io/605876/keychron-keys.png?width=338&height=109&format=auto')
background-size cover
&__base
transform-style preserve-3d
height calc((38 * var(--cm)) * 1vmin)
width calc((14 * var(--cm)) * 1vmin)
top 50%
left 60%
position absolute
transform translate3d(0, -50%, calc((66 * var(--cm)) * 1vmin))
.mousemat
height 260%
width 200%
background black
position absolute
top 50%
left 50%
transform translate3d(-50%, -50%, calc(var(--cm) * 0.1vmin))
.mouse
--depth calc(6 * var(--cm))
--width calc(10 * var(--cm))
--height calc(4 * var(--cm))
--z calc(2 * var(--cm))
top -40%
left 20%
div
background var(--peripheral-three)
&:nth-of-type(1)
background var(--peripheral-one)
&:nth-of-type(2)
&:nth-of-type(3)
background var(--peripheral-four)
&:nth-of-type(5):after
content ''
height 25%
width 30%
background hsl(90, 80%, 50%)
position absolute
top 50%
left 25%
transform translate(-50%, -50%)
.bear-canvas
--width calc(60 * var(--cm))
--height calc(60 * var(--cm))
--depth calc(2 * var(--cm))
--z calc(80 * var(--cm))
--x calc(168 * var(--cm))
--y var(--cm)
div
background hsl(0, 0%, 95%)
filter brightness(1)
transition filter var(--transition)
&:nth-of-type(1)
background linear-gradient(hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 100%, 0.25)), url("https://render.fineartamerica.com/images/rendered/square-product/small/images/artworkimages/mediumlarge/2/bauhaus-1-julie-goonan.jpg"), hsl(0, 0%, 98%)
background-size 75%
background-position center
background-repeat no-repeat
filter brightness(1) grayscale(1)
&:nth-of-type(2):after
content ''
height 100%
width 100%
background hsla(0, 0%, 0%, 0.5)
filter blur(var(--blur))
position absolute
top 10%
left -5%
.window
width calc((114 * var(--cm)) * 1vmin)
background linear-gradient(40deg, transparent 20%, hsla(0, 0%, 100%, 0.5), transparent 50%), linear-gradient(40deg, transparent 50%, hsla(0, 0%, 100%, 0.25), transparent 60%), hsla(190, 80%, 90%, 0.25)
height calc((95 * var(--cm)) * 1vmin)
position absolute
transform rotateX(90deg) translate3d(calc((22 * var(--cm)) * 1vmin), calc((102 * var(--cm)) * 1vmin), calc((18 * var(--cm)) * 1vmin))
transform-origin 50% 0%
&__frame
&--top
&--middle
&--bottom
--depth calc(4 * var(--cm))
--width calc(115 * var(--cm))
--height calc(4 * var(--cm))
div
background hsl(0, 0%, 98%)
&:nth-of-type(6)
background hsl(0, 0%, 90%)
&--top
bottom 0
&--middle
top 60%
&--left
&--right
--depth calc(95 * var(--cm))
--width calc(4 * var(--cm))
--height calc(4 * var(--cm))
div
background hsl(0, 0%, 98%)
&:nth-of-type(6)
background hsl(0, 0%, 90%)
&--right
right 0
.blinds
height 100%
width 100%
position absolute
top 0
left 0
transform translate3d(0, 0, calc((-10 * var(--cm)) * 1vmin)) rotate(180deg)
&:after
content ""
background hsla(0, 0%, 50%, 0.1)
height 100%
width 100%
position absolute
top 0
left 0
transform-origin 50% 0%
transition transform calc(2 * var(--transition)) var(--transition)
transform scaleY(var(--dark))
.blind
height 10%
width 100%
position absolute
top -5%
left 0
background var(--blind)
transform-origin 50% 50%
transition transform calc(2 * var(--transition)) var(--transition), background var(--transition)
// Can be translated by 100% or 1%
// Can be rotated by -2deg or -90deg
transform translate(0, calc((var(--index) * (100 * var(--dark))) * 1%)) rotateX(calc((-85 + (var(--dark) * 83)) * 1deg))
.plant
height calc((14 * var(--cm)) * 1vmin)
width calc((14 * var(--cm)) * 1vmin)
position absolute
transform translate3d(calc((208 * var(--cm)) * 1vmin), calc((6 * var(--cm)) * 1vmin), calc((146 * var(--cm)) * 1vmin))
&__plant
transition filter var(--transition)
filter brightness(1)
height calc((50 * var(--cm)) * 1vmin)
position absolute
bottom 50%
left 50%
transform-origin 50% 100%
transform translate(-50%, 0) rotateX(-90deg) translate3d(0, calc((var(--cm) * 10) * -1vmin), 0) rotateY(calc(var(--r, 0) * 1deg))
&:nth-of-type(2)
--r 90
&:nth-of-type(3)
--r 220
&__pot
--height calc(10 * var(--cm))
--width calc(14 * var(--cm))
--depth calc(14 * var(--cm))
--z calc(6 * var(--cm))
div
background var(--pot-three)
&:nth-of-type(1)
background var(--pot-two)
&:nth-of-type(3)
background var(--pot-one)
&:nth-of-type(5)
background #111
.chair
&__base
opacity calc(1 - var(--zoomed))
height calc((66 * var(--cm)) * 1vmin)
width calc((66 * var(--cm)) * 1vmin)
position absolute
top 50%
left 50%
transform translate3d(-30%, -70%, calc((2 * var(--cm)) * 1vmin)) rotateZ(-25deg)
&__shadow
background hsla(0, 0%, 0%, 0.75)
height 115%
width 115%
border-radius 50%
filter blur(calc(1.5 * var(--blur)))
position absolute
top 50%
left 50%
transform translate(-55%, -45%)
&__wheel
--height calc(6 * var(--cm))
--width calc(6 * var(--cm))
--depth calc(6 * var(--cm))
--z calc(3 * var(--cm))
--x calc(30 * var(--cm))
top 50%
left 50%
margin-left calc((-3 * var(--cm)) * 1vmin)
margin-top calc((-3 * var(--cm)) * 1vmin)
&--one
--starting-rotation 0
&--two
--starting-rotation 72
&--three
--starting-rotation 144
&--four
--starting-rotation 216
&--five
--starting-rotation 288
div
background var(--peripheral-three)
&:nth-of-type(1)
&:nth-of-type(2)
background black
&__spine
--height calc(30 * var(--cm))
--width calc(6 * var(--cm))
--depth calc(6 * var(--cm))
--z calc(20 * var(--cm))
top 50%
left 50%
margin-left calc((-3 * var(--cm)) * 1vmin)
margin-top calc((-3 * var(--cm)) * 1vmin)
div
background black
&:nth-of-type(1)
background var(--peripheral-four)
&__leg
--height calc(4 * var(--cm))
--width calc(30 * var(--cm))
--depth calc(6 * var(--cm))
--z calc(8 * var(--cm))
--x calc(18 * var(--cm))
top 50%
left 50%
margin-left calc((-15 * var(--cm)) * 1vmin)
margin-top calc((-3 * var(--cm)) * 1vmin)
&--one
--starting-rotation 0
&--two
--starting-rotation 72
&--three
--starting-rotation 144
&--four
--starting-rotation 216
&--five
--starting-rotation 288
div
background var(--mac-one)
&:nth-of-type(1)
&:nth-of-type(2)
background var(--mac-three)
&__seat
--height calc(10 * var(--cm))
--width calc(50 * var(--cm))
--depth calc(40 * var(--cm))
--z calc(32 * var(--cm))
top 50%
left 50%
margin-left calc((-25 * var(--cm)) * 1vmin)
margin-top calc((-20 * var(--cm)) * 1vmin)
div
background var(--chair-one)
&:nth-of-type(1)
&:nth-of-type(2)
background var(--chair-accent-one)
&__wing
--height calc(10 * var(--cm))
--width calc(50 * var(--cm))
--depth calc(16 * var(--cm))
--z calc(34 * var(--cm))
top 50%
left 50%
margin-left calc((-25 * var(--cm)) * 1vmin)
&--right
margin-top calc((-28 * var(--cm)) * 1vmin)
--rotate-cuboid-x -15
div:nth-of-type(2)
background var(--chair-accent-one)
border calc((1 * var(--cm)) * 1vmin) solid var(--chair-accent-two)
&--left
margin-top calc((12 * var(--cm)) * 1vmin)
--rotate-cuboid-x 15
div:nth-of-type(1)
background var(--chair-accent-one)
border calc((1 * var(--cm)) * 1vmin) solid var(--chair-accent-two)
div
background var(--chair-two)
&__back
--height calc(66 * var(--cm))
--depth calc(48 * var(--cm))
--width calc(10 * var(--cm))
--z calc(64 * var(--cm))
--rotate-cuboid-y 10
right 0%
top 50%
margin-top calc((-24 * var(--cm)) * 1vmin)
div
background var(--chair-three)
&:nth-of-type(1)
&:nth-of-type(2)
background var(--chair-two)
border calc((1 * var(--cm)) * 1vmin) solid var(--chair-accent-two)
&:nth-of-type(3):after
content ''
position absolute
top 25%
left 50%
transform translate(-50%, -50%)
height 40%
width 40%
filter brightness(1)
transition filter var(--transition)
background url("https://assets.codepen.io/7773162/svgviewer-output_2.svg")
background-size contain
background-repeat no-repeat
&__top
height 100%
width 100%
position absolute
animation-name spin
animation-iteration-count infinite
animation-timing-function linear
animation-duration calc(var(--spin, 0) * 1s)
@keyframes spin
to
transform rotateZ(360deg)
&__headrest
--height calc(20 * var(--cm))
--depth calc(40 * var(--cm))
--width calc(10 * var(--cm))
--z calc(100 * var(--cm))
top 50%
right -5%
margin-top calc((-20 * var(--cm)) * 1vmin)
div
background var(--chair-two)
&:nth-of-type(1)
&:nth-of-type(2)
border calc((1 * var(--cm)) * 1vmin) solid var(--chair-accent-two)
&:nth-of-type(5)
background var(--chair-three)
&__armrest
&--horizontal
--height calc(4 * var(--cm))
--width calc(30 * var(--cm))
--depth calc(8 * var(--cm))
--z calc(52 * var(--cm))
left 20%
&--right
top -5%
&--left
bottom -5%
div
background var(--chair-four)
&:nth-of-type(1)
background var(--chair-three)
&--vertical
--height calc(20 * var(--cm))
--depth calc(6 * var(--cm))
--width calc(6 * var(--cm))
--z calc(40 * var(--cm))
left 35%
&--right
top -4%
&--left
bottom -4%
div
background var(--chair-three)
&:nth-of-type(1)
background var(--chair-one)
// Purely for toggling audio
const AUDIO_TOGGLE = document.querySelector('#audio')
const AUDIO = document.querySelector('.ambience')
AUDIO.volume = 0.5
AUDIO_TOGGLE.addEventListener('input', () => {
AUDIO.muted = !AUDIO.muted
AUDIO.play()
})
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.