diff --git a/CHANGELOG.md b/CHANGELOG.md index 71723f8..c7c5953 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,12 +4,13 @@ All notable changes to this project will be documented in this file. Dates are d Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). -#### [1.13.0](https://github.com/denvash/summer-time-theme-vscode/compare/1.12.0...1.13.0) +#### [1.13.0](https://github.com/denvash/summer-time-theme-vscode/compare/1.13.0...1.13.0) -> 29 October 2019 +> 14 March 2020 -- [+] Graphql [`817a597`](https://github.com/denvash/summer-time-theme-vscode/commit/817a597c69a236dbc76a01d7c4f9db942de27652) -- [~] Changelog [`108eed9`](https://github.com/denvash/summer-time-theme-vscode/commit/108eed9f441fb38d7a048967c6a36e4f8db8ad67) +- [+] Better tokens [`1610b71`](https://github.com/denvash/summer-time-theme-vscode/commit/1610b71cb4df523675fd731bc7c8c185e45c6bd1) +- [+] Fix after update [`793e243`](https://github.com/denvash/summer-time-theme-vscode/commit/793e243253d17faf267e4e9384c9d93fd0c4268b) +- Update README.md [`6a85027`](https://github.com/denvash/summer-time-theme-vscode/commit/6a8502787fe2eb8129f57c0b1c80afb17eab03c5) #### [1.12.0](https://github.com/denvash/summer-time-theme-vscode/compare/1.11.0...1.12.0) diff --git a/demo/Hero.react.js b/demo/Hero.react.js new file mode 100644 index 0000000..b249826 --- /dev/null +++ b/demo/Hero.react.js @@ -0,0 +1,61 @@ +import { IntroParallax, LogoParallax, SocialBar } from "@components"; +import { mixins, styled } from "@styles"; +import React, { useCallback } from "react"; +import { config, useSpring } from "react-spring"; +import tw from "twin.macro"; + +const Logo = styled(LogoParallax)` + ${tw`z-0 absolute right-0 + w-1/2 sm:w-2/5 md:w-1/3 lg:w-1/3 xl:w-1/4 + mr-3 sm:mr-10 md:mr-24 lg:mr-40 xl:mr-64`} +`; + +const Intro = styled(IntroParallax)` + ${tw`z-10`} +`; + +const Wrapper = styled.div` + ${mixins.flexCenter} + ${tw`w-full`} +`; + +const Container = styled.div` + ${mixins.flexCenter} + ${mixins.fillContainer} + ${tw`flex-col`} + ${SocialBar.SC} { + ${tw`mt-24 sm:mt-16`} + } +`; + +const spring = () => ({ + xy: [-100, -100], + config: config.gentle +}); + +const calc = (x, y) => [x - window.innerWidth / 2, y - window.innerHeight / 2]; +const trans = delta => (x, y) => `translate3d(${x / delta}px,${y / delta}px,0)`; + +const Hero = () => { + const [{ xy }, set] = useSpring(spring); + + const onMouseMove = useCallback( + ({ clientX: x, clientY: y }) => set({ xy: calc(x, y) }), + [set] + ); + const transform = useCallback(delta => ({ transform: xy.to(trans(delta)) }), [ + xy + ]); + + return ( + + + + + + + + ); +}; + +export default Hero;