Layered parallax

layered-parallax/.gitignore

@@ -0,0 +1,16 @@
+.vscode/
+.idea/
+node_modules/
+build/
+.DS_Store
+*.tgz
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+/.changelog
+.npm/
+
+
+
+## Vev
+.vev/

layered-parallax/.prettierrc.json

@@ -0,0 +1 @@
+{}

layered-parallax/README.md

@@ -0,0 +1,48 @@
+# Getting started with Vev CLI
+
+> This project was bootstrapped with [Create Vev App](https://github.com/vev-design/create-vev-app).
+
+
+### Initialize 
+
+In your project directory run:
+```bash 
+vev init
+```
+
+This will initialize a new components package in the Vev platform.
+
+### Run
+
+```
+vev start
+```
+Now you can open the [Vev design editor](https://editor.vev.design/), your components will be available in all your projects as long as the CLI is running.
+
+### Build 
+
+Open `./src/MyComponent.tsx` and start building your  React components.
+
+* [Register Vev component](https://developer.vev.design/docs/cli/react/register-vev-component)
+* [Vev props](https://developer.vev.design/docs/cli/react/vev-props)
+* [Vev components]([/docs/cli/react/components](https://developer.vev.design/docs/cli/react/components))
+* [Vev hooks](https://developer.vev.design/docs/cli/react/hooks)
+* [React documentation](https://reactjs.org/docs/getting-started.html)
+
+### Deploy 
+
+Deploy your package:
+
+```
+vev deploy
+```
+
+You can choose to share your components with your account, workspace or team. Configuration is done in the [vev.json](https://developer.vev.design/docs/cli/configuration) file.
+
+
+---
+
+<a href="https://film.vev.design/XoYKo6hk0m/9dDmtRbbmg.390sr734i.mp4"><img src="https://film.vev.design/XoYKo6hk0m/9dDmtRbbmg.390sr734i.360.webm-00001.png"></a>
+
+[Vev Developer Documentation](https://developer.vev.design/docs/cli/)
+

layered-parallax/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "layered-parallax",
+  "version": "0.0.1",
+  "main": "index.js",
+  "scripts": {
+    "login": "vev login",
+    "init": "vev init",
+    "start": "vev start"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@types/react": "latest",
+    "prettier": "2.7.0",
+    "typescript-plugin-css-modules": "^5.0.1"
+  },
+  "dependencies": {
+    "@vev/react": "latest",
+    "@vev/silke": "^1.0.15",
+    "react": "^18.2.0"
+  }
+}

layered-parallax/src/Layer.tsx

@@ -0,0 +1,26 @@
+import { WidgetNode } from "@vev/react";
+import React, { useEffect, useLayoutEffect, useRef } from "react";
+import styles from "./LayeredParallax.module.css";
+type LayerProps = {
+  modelId: string;
+  depth: number;
+  disabled?: boolean;
+  selected?: boolean;
+};
+
+export function Layer({ modelId, depth, disabled, selected }: LayerProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    el.style.setProperty("--depth", depth + "");
+  }, [depth]);
+
+  let cl = styles.layer;
+  if (disabled) cl += " " + styles.disabled;
+
+  return (
+    <div className={cl} ref={ref}>
+      <WidgetNode id={modelId} />
+    </div>
+  );
+}

layered-parallax/src/LayeredParallax.module.css

@@ -0,0 +1,73 @@
+.wrapper {
+  --x: 0.5;
+  --y: 0.5;
+  --movement-x: 40;
+  --movement-y: 80;
+  --rotate: 0;
+  --perspective: 0;
+
+  height: 100%;
+  overflow: inherit;
+
+  &.rotate {
+    transform-style: preserve-3d;
+    perspective: 1000px;
+
+    .layer {
+      transform-origin: center center 0;
+      translate: var(--offset-x) var(--offset-y) var(--offset-z);
+      transform: rotateY(calc((var(--x) - 0.5) * 90deg * var(--rotate)))
+        rotateX(calc((var(--x) - 0.5) * 90deg * var(--rotate)));
+      transform-style: preserve-3d;
+    }
+  }
+
+  &:not(.rotate) {
+    .layer {
+      /** Need to use top and left and not translate since it's % based, and translate is based on the element's size */
+      left: var(--offset-x);
+      top: var(--offset-y);
+    }
+  }
+}
+
+.empty {
+  background-color: #eee;
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  color: #909090;
+  font-size: 14px;
+}
+
+.layer {
+  --depth: 0;
+  --width: calc(100% + var(--movement-x) * var(--depth) * 1%);
+  --height: calc(100% + var(--movement-y) * var(--depth) * 1%);
+  --move-y: var(--movement-y) * var(--depth) * (var(--y) - 0.5) * 1%;
+  --move-x: var(--movement-x) * var(--depth) * (var(--x) - 0.5) * 1%;
+  --offset-x: calc(50% - var(--width) / 2 + var(--move-x));
+  --offset-y: calc(50% - var(--height) / 2 + var(--move-y));
+  --offset-z: calc((1 - var(--depth)) * -1px * var(--perspective));
+
+  position: absolute;
+  width: var(--width);
+  height: var(--height);
+
+  will-change: top left transform;
+
+  &.disabled {
+    opacity: 0.3;
+    filter: saturate(0%) contrast(30%);
+  }
+
+  /* &::before {
+    position: absolute;
+    counter-reset: x calc(var(--x) * 1000) y calc(var(--y) * 1000);
+    content: "x:" counter(x) " y:" counter(y);
+    display: block;
+    background: black;
+    color: white;
+  } */
+}