diff --git a/site/layouts/partials/components/block.html b/site/layouts/partials/components/block.html
new file mode 100644
index 0000000..1f89376
--- /dev/null
+++ b/site/layouts/partials/components/block.html
@@ -0,0 +1,8 @@
+
+
+
+
+
+
diff --git a/src/css/imports/components/block.scss b/src/css/imports/components/block.scss
new file mode 100644
index 0000000..ed1b631
--- /dev/null
+++ b/src/css/imports/components/block.scss
@@ -0,0 +1,207 @@
+$duration: 1s;
+$delay: 0.3s;
+
+$transition-img-in: opacity $duration $delay ease-in, transform $duration;
+$transition-img-out: opacity $duration $delay ease-out, transform $duration;
+
+@mixin img-in {
+ transition: $transition-img-in;
+ opacity: 0.5;
+ transform: none;
+}
+
+@mixin img-out {
+ transition: $transition-img-out;
+}
+
+.c-block::before,
+.c-block__img {
+ @include abs-full;
+}
+
+.c-block {
+ z-index: 1;
+ position: relative;
+ overflow: hidden;
+
+ width: 100%;
+ height: 100%;
+
+ &::before {
+ //will-change: transform;
+ z-index: 1;
+ content: "";
+ transition: transform $duration;
+ background-color: currentColor;
+ }
+
+ > .c-block__img {
+ z-index: 2;
+ //will-change: opacity, transform;
+ background-size: cover;
+ background-position: center;
+ opacity: 0;
+ }
+}
+
+.c-block--1 {
+ &::before {
+ transform-origin: 100% 100%;
+
+ @at-root .state-0 & {
+ transform: scale(1, 1);
+ }
+
+ @at-root .state-1 & {
+ transform: scale(0.5, 1);
+ }
+
+ @at-root .state-2 & {
+ transform: scale(0.5, 0.5);
+ }
+ }
+
+ > .c-block__img {
+ transform-origin: 0 0;
+
+ @at-root .state-0 & {
+ @include img-in;
+ }
+
+ @at-root .state-1 & {
+ @include img-out;
+ transform: translate(50%, 0) scale(1.3);
+ }
+
+ @at-root .state-2 & {
+ transform: translate(50%, 50%) scale(2);
+ }
+ }
+}
+
+.c-block--2 {
+ &::before {
+ transform-origin: 100% 0;
+
+ @at-root .state-0 & {
+ transform: scale(0.5, 0.5);
+ }
+
+ @at-root .state-1 & {
+ transform: scale(1, 1);
+ }
+
+ @at-root .state-2 & {
+ transform: scale(0.5, 1);
+ }
+ }
+
+ > .c-block__img {
+ transform-origin: 0 100%;
+
+ @at-root .state-0 & {
+ transform: translate(50%, 50%) scale(2);
+ }
+
+ @at-root .state-1 & {
+ @include img-in;
+ }
+
+ @at-root .state-2 & {
+ transform: translate(50%, 0) scale(1.3);
+ @include img-out;
+ }
+ }
+}
+
+.c-block--3 {
+ &::before {
+ transform-origin: 100% 0;
+
+ @at-root .state-0 & {
+ transform: scale(0.5, 1);
+ }
+
+ @at-root .state-1 & {
+ transform: scale(0.5, 0.5);
+ }
+
+ @at-root .state-2 & {
+ transform: scale(1, 1);
+ }
+ }
+
+ > .c-block__img {
+ transform-origin: 0 100%;
+
+ @at-root .state-0 & {
+ @include img-out;
+ transform: translate(50%, 0) scale(1.3);
+ }
+
+ @at-root .state-1 & {
+ transform: translate(50%, 50%) scale(2);
+ }
+
+ @at-root .state-2 & {
+ @include img-in;
+ }
+ }
+}
+
+.c-block--4 {
+ &::before {
+ transform-origin: 100% 0;
+
+ @at-root .state-0 & {
+ transform: scale(0.33, 1);
+ }
+
+ @at-root .state-1 & {
+ transform: scale(0.33, 0.25);
+ }
+
+ @at-root .state-2 & {
+ transform: scale(1, 1);
+ }
+ }
+
+ > .c-block__img {
+ transform-origin: 0 100%;
+
+ @at-root .state-0 & {
+ @include img-out;
+ transform: translate(66.6%, 0) scale(1.3);
+ }
+
+ @at-root .state-1 & {
+ transform: translate(66.6%, 66.6%) scale(2);
+ }
+
+ @at-root .state-2 & {
+ @include img-in;
+ }
+ }
+}
+
+.c-block--5 {
+ &::before {
+ transform-origin: 100% 100%;
+
+ @at-root .state-0 & {
+ transform: scale(1, 1);
+ }
+
+ @at-root .state-1 & {
+ transform: scale(0.5, 1);
+ }
+
+ @at-root .state-2 & {
+ transform: scale(0.5, 0.5);
+ }
+ }
+}
+//
+//
+//
+// vim:set filetype=scss: