update studios site

2020-01-04 17:29:07 +10:00
parent 02b25f92b7
commit 54cbf20b54
25 changed files with 20957 additions and 7 deletions
@@ -0,0 +1,12 @@
+const preact = require('preact');
+
+const LogRocket = require('logrocket');
+
+const { Provider, connect } = require('preact-redux');
+const { createStore, combineReducers } = require('redux');
+const { StripeProvider } = require('react-stripe-elements');
+
+const Studios = require('./components/studios');
+
+// eslint-disable-next-line
+preact.render(<Studios />, document.body);
@@ -0,0 +1,75 @@
+const preact = require('preact');
+const { Component } = require('preact');
+const anime = require('animejs').default;
+
+class Noise extends Component {
+    constructor() {
+        super();
+        this.animations = [];
+    }
+
+    render() {
+        return (
+            <svg
+                version="1.1"
+                id="noise"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 400 400">
+                <filter id='noiseFilter'>
+                    <feTurbulence type="turbulence" baseFrequency="0.2" numOctaves="2" result="turbulence"></feTurbulence>
+                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+                </filter>
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        this.animations.push(anime({
+            targets: ['#noiseFilter feTurbulence', '#noiseFilter feDisplacementMap'],
+            easing: 'linear',
+            loop: true,
+            keyframes: [
+                {
+                    baseFrequency: 0.5,
+                    duration: () => anime.random(1000, 2000),
+                },
+            ],
+        }));
+
+        this.animations.push(anime({
+            targets: ['#noiseFilter feDisplacementMap'],
+            easing: 'linear',
+            loop: true,
+            keyframes: [
+                {
+                    scale: 2,
+                    duration: () => anime.random(2000, 5000),
+                },
+                {
+                    scale: 4,
+                    duration: () => anime.random(150, 250),
+                },
+                {
+                    scale: 2,
+                    duration: () => anime.random(100, 150),
+                },
+                {
+                    scale: 4,
+                    duration: () => anime.random(150, 250),
+                },
+            ],
+        }));
+    }
+
+    // this is necessary because
+    // skipping / timing / unmounting race conditions
+    // can cause the animations to cut short, this will ensure the values are reset
+    // because preact will recycle all these components
+    componentWillUnmount() {
+        for (let i = this.animations.length - 1; i >= 0; i--) {
+            this.animations[i].reset();
+        }
+    }
+}
+
+module.exports = Noise;
@@ -0,0 +1,35 @@
+const preact = require('preact');
+
+const Noise = require('./noise');
+
+function Studios(args) {
+    return (
+        <main>
+            <Noise />
+            <div class="logo"/>
+            <hr />
+            <div class='list'>
+                <figure>
+                    <a href='mailto:humans@mnml.gg'>Email</a>
+                    <figcaption>humans@mnml.gg</figcaption>
+                </figure>
+                <figure>
+                    <a class='ready' href='https://mnml.gg'>MNML</a>
+                    <figcaption>Play MNML - Our flagship game</figcaption>
+                </figure>
+            </div>
+            <hr />
+            <div class="list">
+                <div class="intro">
+                    <p> <b>Minimal Studios</b> is Nathan Rashleigh & Himesh Kapadia.</p>
+                    <p> We are an independent software development duo based in Brisbane, Australia. </p>
+                    <p> We specialise in <b>fast, simple & maintainable</b> software.  </p>
+                    <p> Our debut game <b>MNML</b>, written in <b>Rust</b>, was featured in the PAX Rising area during <b>PAX AUS 2019</b>. </p>
+                </div>
+                <div class="awards"></div>
+            </div>
+        </main>
+    );
+}
+
+module.exports = Studios;