redesign

src/App.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import AnimatedBackground from './Components/AnimatedBackground'
+import Cursor from './Components/Cursor'
+import Letters from './Screens/Letters'
+import { useMousePosition } from './util'
+
+export const Duration = 4000
+
+const App: React.FC = () => {
+
+	const mouse = useMousePosition()
+
+	const convertToDeg = (current: number, factor: number) => `${(.5 - current) * factor}deg`
+
+	return <div id="App">
+		<section id={'letters-container'} style={{
+			transform: `rotateX(${convertToDeg(mouse.relative.y, 2)}) rotateY(${convertToDeg(mouse.relative.x, .5)})`,
+		}}>
+			<h1>
+				<Letters/>
+			</h1>
+		</section>
+
+		<div id={'bg'}>
+			<AnimatedBackground/>
+		</div>
+
+		<Cursor/>
+
+		<footer>
+			<span>dev.</span>
+			<br/>
+			<span>say <a href={'mailto:hi@nicco.io'}>hi@nicco.io</a></span>
+		</footer>
+	</div>
+}
+
+export default App

src/Components/AnimatedBackground.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react'
+import { Duration } from '../App'
+import { GoldenRatio, Rand } from '../util'
+
+type Color = [number, number, number]
+
+const getRandomColor = () => [Rand(0, 255), Rand(70, 90), Rand(80, 90)] as Color
+const colorToString = ([h, s, l]: Color) => `hsl(${h}, ${s}%, ${l}%)` as string
+const valuesToGradient = (dir: number, from: Color, to: Color) => `linear-gradient(${dir}deg, ${colorToString(from)}, ${colorToString(to)})` as string
+
+const AnimatedBackground: React.FC = () => {
+
+	const [start, setStart] = useState<Color>([255, 255, 255])
+	const [end, setEnd] = useState<Color>([255, 255, 255])
+	const [direction, setDirection] = useState<number>(0)
+
+	const update = () => {
+		const from = getRandomColor()
+		// Calculate cojugate color based on the golden ratio
+		const to: Color = [Math.floor(from[0] + (255 * GoldenRatio * 2)) % 255, from[1], from[2]]
+
+		setStart(from)
+		setEnd(to)
+		setDirection(Rand(0, 360))
+	}
+
+	useEffect(() => {
+		update()
+		const interval = setInterval(update, Duration)
+		return () => clearInterval(interval)
+	}, [])
+
+	return <div className={'animated-background'} style={{
+		backgroundImage: valuesToGradient(direction, start, end),
+	}}/>
+}
+
+export default AnimatedBackground

src/Components/Cursor.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { useIsMousePresent, useMousePosition } from '../util'
+
+const Cursor: React.FC = () => {
+	const mouse = useMousePosition()
+	const present = useIsMousePresent()
+
+	return present
+		? <span style={{
+			position: 'fixed',
+			top: mouse.absolute.y,
+			left: mouse.absolute.x,
+			width: '1em',
+			height: '1em',
+			borderRadius: '1em',
+			transform: 'translate(-50%, -50%)',
+			backgroundColor: '#000000',
+		}}/>
+		: null
+}
+
+export default Cursor

src/Components/LetterAnimation.tsx

@@ -0,0 +1,43 @@
+import anime from 'animejs'
+import React, { useEffect, useRef } from 'react'
+import { Duration } from '../App'
+
+export type LettersProps = {
+	text: string
+	delay?: number
+}
+
+const LetterAnimation: React.FC<LettersProps> = React.memo(({ text, delay }) => {
+
+	const letters = useRef<HTMLElement>(null)
+
+	const animate = () => {
+		if (!letters || !letters.current) return
+
+		const wrapper = letters.current
+		wrapper.innerHTML = wrapper.innerText.replace(
+			/./g,
+			l => `<span class='letter'>${l}</span>`,
+		)
+
+		anime({
+			targets: wrapper.querySelectorAll(`.letter`),
+			translateX: [40, 0],
+			rotateY: [-20, 0],
+			opacity: [0, 1],
+			// color: () => getRandomColor(),
+			easing: 'easeOutExpo',
+			duration: Duration / 3,
+			delay: (el, i) => (delay || 0) + 250 + 25 * i,
+		})
+
+	}
+
+	useEffect(animate)
+
+	return <span ref={letters} className="letters">
+		{text}
+	</span>
+})
+
+export default LetterAnimation

src/Screens/Letters.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useRef, useState } from 'react'
+import LetterAnimation from '../Components/LetterAnimation'
+
+type Pair = [string, string]
+
+const pairs: Pair[] = [
+	['visualize', 'create'],
+	['invision', 'build'],
+	['ideate', 'deploy'],
+]
+
+export const Duration = 4000
+
+const Letters: React.FC = React.memo(() => {
+
+	const [index, setIndex] = useState<number>(0)
+	const wrapper = useRef<HTMLElement>(null)
+
+
+	useEffect(() => {
+		setTimeout(
+			() => setIndex((index < pairs.length - 1) ? index + 1 : 0),
+			Duration,
+		)
+	}, [index])
+
+	return <span id={'letters-wrapper'} ref={wrapper}>
+		<LetterAnimation text={pairs[index][0] + '.'}/>
+		<LetterAnimation text={pairs[index][1] + '.'} delay={500}/>
+	</span>
+})
+
+export default Letters

src/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Template</title>
+    <meta charset="utf-8">
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+</head>
+
+<body>
+<div id="root"></div>
+</body>
+
+</html>

src/index.styl

@@ -0,0 +1 @@
+@require './styles/*'

src/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+import './index.styl'
+
+ReactDOM.render(<App/>, document.getElementById('root'))

src/styles/AnimatedBackground.styl

@@ -0,0 +1,4 @@
+.animated-background
+	height 100%
+	width 100%
+	animation all 1s linear

src/styles/App.styl

@@ -0,0 +1,33 @@
+@require './Breakpoints.styl'
+
+#App
+	height 100vh
+	width 100vw
+	display flex
+	align-items center
+	justify-content center
+	perspective 1em
+
+	#bg
+		position absolute
+		left 0
+		top 0
+		width 100vw
+		height 100vh
+		z-index -1
+
+	#letters-wrapper
+		display inline-block
+		text-align center
+		font-size 1em
+		font-weight bold
+		+is-phone()
+			font-size 2.5em
+		+is-tablet()
+			font-size 3em
+		+is-netbook()
+			font-size 3.5em
+		+is-laptop()
+			font-size 4em
+		+is-desktop()
+			font-size 4.5em

src/styles/Breakpoints.styl

@@ -0,0 +1,20 @@
+is-phone()
+	@media (max-width: 599px)
+		{block}
+
+is-tablet()
+	@media (min-width: 600px) {
+		block
+	}
+
+is-netbook()
+	@media (min-width: 900px)
+		{block}
+
+is-laptop()
+	@media (min-width: 1200px)
+		{block}
+
+is-desktop()
+	@media (min-width: 1800px)
+		{block}

src/styles/Footer.styl

@@ -0,0 +1,18 @@
+footer
+	font-family 'Inconsolata', monospace
+	display flex
+	align-items center
+	justify-content center
+	flex-direction column
+	font-size 1.2em
+	position absolute
+	bottom 0
+	left 0
+	text-align center
+	width 100vw
+	padding 1em
+
+	a
+		text-decoration inherit
+		color inherit
+		font-weight bold

src/styles/Letters.styl

@@ -0,0 +1,9 @@
+.letters
+	display inline-block
+	position relative
+	letter-spacing .05em
+
+.letter
+	display inline-block
+	transform-origin 0 0
+	line-height 1em

src/styles/global.styl

@@ -0,0 +1,16 @@
+@import url('https://fonts.googleapis.com/css?family=Raleway')
+@import url('https://fonts.googleapis.com/css?family=Merriweather:300,400,700')
+@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700')
+
+*
+	box-sizing border-box
+	cursor none
+
+html,
+body,
+#root
+	margin 0
+	border 0
+	font-family 'Merriweather', serif
+	font-size 1em
+	overflow hidden

src/util.ts

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react'
+
+const getSize = () => {
+	const { innerHeight, innerWidth, outerHeight, outerWidth } = window
+	return { innerHeight, innerWidth, outerHeight, outerWidth }
+}
+
+export const useIsMousePresent = ()=> {
+	let [present, setPresent] = useState<boolean>(true)
+
+	useEffect(() => {
+		const enter = ()=> setPresent(true)
+		const leave = ()=> setPresent(false)
+		window.document.addEventListener('mouseenter', enter)
+		window.document.addEventListener('mouseleave', leave)
+		return () => {
+			window.document.removeEventListener('mouseenter', enter)
+			window.document.removeEventListener('mouseleave', leave)
+		}
+	}, [])
+
+	return present
+}
+
+export const useMousePosition = () => {
+	let [position, setPosition] = useState({ absolute: { x: 0, y: 0 }, relative: { x: 0, y: 0 } })
+
+	const handle = (e: MouseEvent) => {
+		setPosition({
+			absolute: {
+				x: e.pageX,
+				y: e.pageY,
+			},
+			relative: {
+				x: e.pageX / window.innerWidth,
+				y: e.pageY / window.innerHeight,
+			},
+		})
+	}
+
+	useEffect(() => {
+		window.addEventListener('mousemove', handle)
+		return () => {
+			window.removeEventListener('mousemove', handle)
+		}
+	}, [])
+
+	return position
+}
+
+export const Rand = (from: number = 0, to: number = 1, float: boolean = false) => {
+	const rand = (Math.random() * (to - from)) + from
+	return float ? rand : rand | 0
+}
+
+export const GoldenRatio: number = (1 + Math.sqrt(5)) / 2