mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-02 00:18:17 +00:00
corporate page update
This commit is contained in:
1 parent
7e26d701d9
commit
900cababae
11 files changed
+785
-737
No files matched your search
@@ -12,6 +12,7 @@
|
||||
"start-fakeyou-w": "set PORT=7000 && lerna exec --scope @storyteller/fakeyou -- yarn start-w",
|
||||
"build-fakeyou": "lerna exec --scope @storyteller/fakeyou -- yarn build",
|
||||
"start-storyteller-home": "PORT=7008 BROWSER=none lerna exec --scope @storyteller/storyteller-home -- yarn start",
|
||||
"start-storyteller-home-w": "set PORT=7008 && lerna exec --scope @storyteller/storyteller-home -- yarn start-w",
|
||||
"build-storyteller-home": "lerna exec --scope @storyteller/storyteller-home -- yarn build",
|
||||
"start-storyteller-obs": "PORT=7007 BROWSER=none lerna exec --scope @storyteller/storyteller-obs -- yarn start",
|
||||
"build-storyteller-obs": "lerna exec --scope @storyteller/storyteller-obs -- yarn build",
|
||||
|
||||
@@ -5,10 +5,10 @@
|
||||
"dependencies": {
|
||||
"@storyteller/components": "0.1.0",
|
||||
"@craco/craco": "^6.4.3",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.36",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.15.4",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.4",
|
||||
"@fortawesome/react-fontawesome": "^0.1.15",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.1.1",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.1.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.1.1",
|
||||
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||
"@testing-library/jest-dom": "^5.16.1",
|
||||
"@testing-library/react": "^9.5.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
@@ -27,10 +27,13 @@
|
||||
"react-scripts": "5.0.0",
|
||||
"three": "0.138.3",
|
||||
"typescript": "^4.5.5",
|
||||
"web-vitals": "^2.1.4"
|
||||
"web-vitals": "^2.1.4",
|
||||
"locomotive-scroll": "^4.1.4",
|
||||
"react-locomotive-scroll": "^0.2.2"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "craco start",
|
||||
"start-w": "set BROWSER=none && craco start",
|
||||
"build": "craco build",
|
||||
"test": "craco test",
|
||||
"eject": "craco eject"
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 380 KiB |
@@ -3,16 +3,27 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
href="%PUBLIC_URL%/apple-touch-icon.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="%PUBLIC_URL%/favicon-32x32.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href="%PUBLIC_URL%/favicon-16x16.png"
|
||||
/>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#209cee" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Storyteller supercharges your stream"
|
||||
/>
|
||||
<meta name="description" content="Storyteller supercharges your stream" />
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
@@ -31,26 +42,57 @@
|
||||
<title>Storyteller. Stream tech.</title>
|
||||
|
||||
<!-- Twitter, Discord, etc. -->
|
||||
<meta property="og:title" content="Storyteller, deep fake and production tools." />
|
||||
<meta
|
||||
property="og:title"
|
||||
content="Storyteller, deep fake and production tools."
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://storyteller.io" />
|
||||
<meta property="og:image" content="%PUBLIC_URL%/apple-touch-icon.png" />
|
||||
<meta property="og:description" content="Storyteller. You can supercharge your stream." />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Storyteller. You can supercharge your stream."
|
||||
/>
|
||||
|
||||
<!-- Include this to make the og:image larger -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-9FYFXYQ42S"></script>
|
||||
<script
|
||||
async
|
||||
src="https://www.googletagmanager.com/gtag/js?id=G-9FYFXYQ42S"
|
||||
></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-9FYFXYQ42S');
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag("js", new Date());
|
||||
|
||||
gtag("config", "G-9FYFXYQ42S");
|
||||
</script>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,300;0,400;1,300&family=Fugaz+One&family=Merriweather:wght@300&family=Fira+Sans:ital,wght@0,200;0,300;0,400;1,200;1,300;1,400&display=swap" rel="stylesheet">
|
||||
<!-- Font -->
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700;800;900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script
|
||||
defer
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
@@ -1,27 +1,284 @@
|
||||
//@import-normalize; /* bring in normalize.css styles */
|
||||
|
||||
$page-width: 700px;
|
||||
@import "./locomotive-scroll.scss";
|
||||
|
||||
$light-text-color: #777;
|
||||
$button-text-color: #666;
|
||||
$primary: #fa6b68;
|
||||
$white: #ffffff;
|
||||
|
||||
$body-font-family: 'Fira Sans', serif;
|
||||
$nav-font-family: 'Fira Sans', sans-serif;
|
||||
$footer-font-family: 'Fira Sans Condensed', sans-serif;
|
||||
$textarea-font-family: 'Fira Sans', sans-serif;
|
||||
$headings-font-family: 'Merriweather', serif;
|
||||
$body-font-family: "Fira Sans", serif;
|
||||
|
||||
body {
|
||||
font-family: $body-font-family;
|
||||
font-weight: 300; // For Fira Sans
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.mainwrap {
|
||||
max-width: 1000px;
|
||||
margin: auto;
|
||||
::-moz-selection {
|
||||
/* Code for Firefox */
|
||||
color: $white;
|
||||
background: $primary;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: $white;
|
||||
background: $primary;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
padding-right: var(--bs-gutter-x, 1rem);
|
||||
padding-left: var(--bs-gutter-x, 1rem);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.git-sha {
|
||||
color: #999;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.noselect {
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-khtml-user-select: none; /* Konqueror HTML */
|
||||
-moz-user-select: none; /* Old versions of Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none; /* Non-prefixed version, currently
|
||||
supported by Chrome, Edge, Opera and Firefox */
|
||||
}
|
||||
|
||||
.bg-hero {
|
||||
background: rgb(34, 34, 56);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(34, 34, 56, 1) 0%,
|
||||
rgba(23, 23, 37, 1) 100%
|
||||
);
|
||||
height: 100vh;
|
||||
min-height: 960px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#content {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
top: 0;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: rgba($white, 0.6);
|
||||
padding: 4px 0;
|
||||
margin: auto 24px;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $white;
|
||||
border-bottom: 3px solid $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.lead {
|
||||
color: rgba($white, 0.8);
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
padding: 10px 24px;
|
||||
z-index: 2;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-primary:focus,
|
||||
.btn-primary:active {
|
||||
background-color: $primary !important;
|
||||
border: 2.5px solid;
|
||||
border-color: $primary !important;
|
||||
transition: 0.2s;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($primary, 5%) !important;
|
||||
border-color: lighten($primary, 5%) !important;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-title-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 7.5rem;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
padding-top: 130px;
|
||||
letter-spacing: 3px;
|
||||
// text-shadow: 0px 10px 100px #171725;
|
||||
z-index: 1;
|
||||
white-space: nowrap;
|
||||
|
||||
.hero-title-one {
|
||||
text-align: left;
|
||||
|
||||
span {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-title-two {
|
||||
margin-top: -35px;
|
||||
padding-left: 22%;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-sub-title {
|
||||
max-width: 400px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.hero-title-outline {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
transform: scale(1.72);
|
||||
top: -44px;
|
||||
}
|
||||
|
||||
.text-outline {
|
||||
color: transparent;
|
||||
-webkit-text-stroke: 0.5px rgba($white, 0.1);
|
||||
}
|
||||
|
||||
.shape-1-container {
|
||||
position: absolute;
|
||||
bottom: 38%;
|
||||
left: 18%;
|
||||
}
|
||||
.shape-1 {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
background: #2c2c40;
|
||||
border-radius: 12px;
|
||||
transform: translate3d(0px, 0px, 0px) rotate(45deg);
|
||||
z-index: 5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.shape-2 {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
background: #2c2c40;
|
||||
border-radius: 16px;
|
||||
transform: translate3d(0px, 0px, 0px) rotate(45deg);
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
right: 18%;
|
||||
z-index: 5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.shape-3-container {
|
||||
position: absolute;
|
||||
bottom: 32%;
|
||||
right: 28%;
|
||||
}
|
||||
|
||||
.shape-3 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #2c2c40;
|
||||
border-radius: 12px;
|
||||
transform: translate3d(0px, 0px, 0px) rotate(45deg);
|
||||
z-index: 5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.shape-4-container {
|
||||
position: absolute;
|
||||
bottom: 15%;
|
||||
left: 32%;
|
||||
}
|
||||
|
||||
.shape-4 {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #2c2c40;
|
||||
border-radius: 10px;
|
||||
transform: translate3d(0px, 0px, 0px) rotate(45deg);
|
||||
z-index: 5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.zi-1 {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.zi-2 {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.zi-10 {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.hero-img {
|
||||
width: 100%;
|
||||
min-width: 1920px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
background: rgb(47, 47, 75);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(47, 47, 75, 1) 0%,
|
||||
rgba(32, 32, 51, 1) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: -1px;
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
.social-icons {
|
||||
margin-left: 1rem;
|
||||
font-size: 26px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
a {
|
||||
color: #7676a0;
|
||||
transition: 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: lighten(#7676a0, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,37 +1,53 @@
|
||||
import 'bulma/css/bulma.css'
|
||||
import './App.scss';
|
||||
// import 'bulma/css/bulma.css'
|
||||
import "./App.scss";
|
||||
|
||||
import React from 'react';
|
||||
import { BrowserRouter, Route, Switch } from 'react-router-dom';
|
||||
import IndexPage from './pages/index/IndexPage';
|
||||
import VoxelCamPage from './pages/voxelcam/VoxelCamPage';
|
||||
import { Footer } from './common/Footer';
|
||||
import JobsPage from './pages/jobs/JobsPage';
|
||||
import ScrollToTop from '@storyteller/components/src/elements/ScrollToTop';
|
||||
import React, { useRef } from "react";
|
||||
import { BrowserRouter, Route, Switch } from "react-router-dom";
|
||||
import IndexPage from "./pages/index/IndexPage";
|
||||
import VoxelCamPage from "./pages/voxelcam/VoxelCamPage";
|
||||
import JobsPage from "./pages/jobs/JobsPage";
|
||||
import { LocomotiveScrollProvider } from "react-locomotive-scroll";
|
||||
import { TopNav } from "./common/TopNav";
|
||||
|
||||
function App() {
|
||||
const containerRef = useRef(null);
|
||||
|
||||
function App () {
|
||||
return (
|
||||
<>
|
||||
<BrowserRouter>
|
||||
<div id="main" className="mainwrap">
|
||||
<div id="viewable">
|
||||
{/*<TopNav /> */}
|
||||
<ScrollToTop />
|
||||
<Switch>
|
||||
<Route path="/voxelcam">
|
||||
<VoxelCamPage />
|
||||
</Route>
|
||||
<Route path="/jobs">
|
||||
<JobsPage />
|
||||
</Route>
|
||||
<Route exact={true} path="/">
|
||||
<IndexPage />
|
||||
</Route>
|
||||
</Switch>
|
||||
<LocomotiveScrollProvider
|
||||
options={{
|
||||
smooth: true,
|
||||
multiplier: 0.7,
|
||||
// ... all available Locomotive Scroll instance options
|
||||
}}
|
||||
watch={
|
||||
[
|
||||
//..all the dependencies you want to watch to update the scroll.
|
||||
// Basicaly, you would want to watch page/location changes
|
||||
// For exemple, on Next.js you would want to watch properties like `router.asPath` (you may want to add more criterias if the instance should be update on locations with query parameters)
|
||||
]
|
||||
}
|
||||
containerRef={containerRef}
|
||||
>
|
||||
<BrowserRouter>
|
||||
<div data-scroll-container ref={containerRef}>
|
||||
<div>
|
||||
<TopNav />
|
||||
<Switch>
|
||||
<Route path="/voxelcam">
|
||||
<VoxelCamPage />
|
||||
</Route>
|
||||
<Route path="/jobs">
|
||||
<JobsPage />
|
||||
</Route>
|
||||
<Route exact={true} path="/">
|
||||
<IndexPage />
|
||||
</Route>
|
||||
</Switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</BrowserRouter>
|
||||
</BrowserRouter>
|
||||
</LocomotiveScrollProvider>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,97 +1,65 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
interface Props {
|
||||
}
|
||||
interface Props {}
|
||||
|
||||
function TopNav(props: Props) {
|
||||
|
||||
const [mobileHamburgerIsActive, setMobileHamburgerIsActive] = useState<boolean>(false);
|
||||
|
||||
const toggleHamburger = () => {
|
||||
setMobileHamburgerIsActive(!mobileHamburgerIsActive);
|
||||
const navbar = document.getElementById("navbar");
|
||||
if (navbar) {
|
||||
console.log(navbar);
|
||||
}
|
||||
|
||||
const closeHamburger = () => {
|
||||
// TODO: This is an ergonomic hack.
|
||||
// The hamburger ideally should close whenever it is no longer active.
|
||||
setMobileHamburgerIsActive(false);
|
||||
}
|
||||
|
||||
const navbarClasses = mobileHamburgerIsActive ? "navbar-menu is-active" : "navbar-menu";
|
||||
const navbarBurgerClasses = mobileHamburgerIsActive ? "navbar-burger is-active" : "navbar-burger";
|
||||
let prevScrollpos = window.pageYOffset;
|
||||
window.onscroll = function () {
|
||||
const currentScrollPos = window.pageYOffset;
|
||||
if (prevScrollpos > currentScrollPos) {
|
||||
navbar!.style.top = "0";
|
||||
} else {
|
||||
navbar!.style.top = "-50";
|
||||
}
|
||||
prevScrollpos = currentScrollPos;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className="navbar is-transparent padding-bottom-1em">
|
||||
<div className="navbar-brand">
|
||||
<Link className="navbar-item" to="/">
|
||||
<img src="/storyteller-nav-logo-mascot-pink.png" alt="Storyteller: Stream tech" />
|
||||
</Link>
|
||||
<div className={navbarBurgerClasses} data-target="navbarExampleTransparentExample" onClick={() => toggleHamburger()}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<nav id="navbar" className="container-fluid">
|
||||
<header className="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 topnav px-3">
|
||||
<a
|
||||
href="/"
|
||||
className="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none"
|
||||
>
|
||||
<img
|
||||
src="/logo/Storyteller-Logo.png"
|
||||
alt="Storyteller Logo"
|
||||
height="36"
|
||||
className="mb-2"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<ul className="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
|
||||
<li>
|
||||
<a href="/" className="nav-link active">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/" className="nav-link">
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/" className="nav-link">
|
||||
What We Do
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className="col-md-3 text-end">
|
||||
<button type="button" className="btn btn-primary">
|
||||
Contact
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="navbarExampleTransparentExample" className={navbarClasses}>
|
||||
<div className="navbar-start">
|
||||
|
||||
<Link to="/"
|
||||
className="navbar-item"
|
||||
onClick={() => closeHamburger()}
|
||||
>Foo</Link>
|
||||
|
||||
<Link to="/"
|
||||
className="navbar-item"
|
||||
onClick={() => closeHamburger()}
|
||||
>Bar</Link>
|
||||
|
||||
{/*
|
||||
<div className="navbar-item has-dropdown is-hoverable">
|
||||
<Link to="/"
|
||||
className="navbar-link"
|
||||
onClick={() => closeHamburger()}
|
||||
>Community</Link>
|
||||
|
||||
<div className="navbar-dropdown is-boxed">
|
||||
{/* NB: There's an "is-active" class that looks nice. * /}
|
||||
|
||||
<Link to="/contribute"
|
||||
className="navbar-item"
|
||||
onClick={() => closeHamburger()}
|
||||
><FontAwesomeIcon icon={faUpload} /> Contribute / Upload</Link>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
*/}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="navbar-end">
|
||||
<div className="navbar-item">
|
||||
<div className="field is-grouped">
|
||||
<p className="control">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*<div className="navbar-end">
|
||||
<div className="navbar-item">
|
||||
<div className="field is-grouped">
|
||||
<p className="control">
|
||||
TODO
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>*/}
|
||||
</div>
|
||||
</nav>
|
||||
</>
|
||||
)
|
||||
|
||||
|
||||
</header>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export { TopNav }
|
||||
export { TopNav };
|
||||
@@ -0,0 +1,82 @@
|
||||
/*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
|
||||
html.has-scroll-smooth {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
html.has-scroll-dragging {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.has-scroll-smooth body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.has-scroll-smooth [data-scroll-container] {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
[data-scroll-direction="horizontal"] [data-scroll-container] {
|
||||
height: 100vh;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[data-scroll-direction="horizontal"] [data-scroll-section] {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.c-scrollbar {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 11px;
|
||||
height: 100%;
|
||||
transform-origin: center right;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
opacity: 0;
|
||||
}
|
||||
.c-scrollbar:hover {
|
||||
transform: scaleX(1.45);
|
||||
}
|
||||
.c-scrollbar:hover,
|
||||
.has-scroll-scrolling .c-scrollbar,
|
||||
.has-scroll-dragging .c-scrollbar {
|
||||
opacity: 1;
|
||||
}
|
||||
[data-scroll-direction="horizontal"] .c-scrollbar {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
[data-scroll-direction="horizontal"] .c-scrollbar:hover {
|
||||
transform: scaleY(1.3);
|
||||
}
|
||||
|
||||
.c-scrollbar_thumb {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: black;
|
||||
opacity: 0.5;
|
||||
width: 7px;
|
||||
border-radius: 10px;
|
||||
margin: 2px;
|
||||
cursor: -webkit-grab;
|
||||
cursor: grab;
|
||||
}
|
||||
.has-scroll-dragging .c-scrollbar_thumb {
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: grabbing;
|
||||
}
|
||||
[data-scroll-direction="horizontal"] .c-scrollbar_thumb {
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
@@ -1,611 +1,221 @@
|
||||
import React from 'react';
|
||||
import { faApple, faLinux, faTwitch, faWindows } from '@fortawesome/free-brands-svg-icons';
|
||||
import { faArrowRight, faFlask, faMicrophone, faQuoteLeft, faUserCircle } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import AudioSample from './AudioSample';
|
||||
import Scene from './Scene';
|
||||
import { TtsComponent } from './TtsComponent';
|
||||
import { Link } from 'react-router-dom';
|
||||
import React from "react";
|
||||
import {
|
||||
faApple,
|
||||
faDiscord,
|
||||
faFacebook,
|
||||
faPatreon,
|
||||
faTwitch,
|
||||
faTwitter,
|
||||
} from "@fortawesome/free-brands-svg-icons";
|
||||
import { faArrowRightArrowLeft } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { TopNav } from "../../common/TopNav";
|
||||
|
||||
function IndexPage () {
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
function IndexPage() {
|
||||
return (
|
||||
<div>
|
||||
<div data-scroll-section>
|
||||
<div className="bg-hero">
|
||||
<div
|
||||
className="shape-1-container"
|
||||
data-scroll
|
||||
data-scroll-speed="4"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
<div className="shape-1"></div>
|
||||
</div>
|
||||
<div className="shape-2"></div>
|
||||
<div
|
||||
className="shape-3-container"
|
||||
data-scroll
|
||||
data-scroll-speed="3"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
<div className="shape-3"></div>
|
||||
</div>
|
||||
<div
|
||||
className="shape-4-container"
|
||||
data-scroll
|
||||
data-scroll-speed="2"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
<div className="shape-4"></div>
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="hero-title-container">
|
||||
<h1 className="hero-title d-flex flex-column text-center">
|
||||
<div
|
||||
className="hero-title-one align-items-center zi-2"
|
||||
data-scroll
|
||||
data-scroll-speed="3"
|
||||
data-scroll-direction="horizontal"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
The <span>Future</span>
|
||||
</div>
|
||||
<div
|
||||
className="hero-title-two zi-2"
|
||||
data-scroll
|
||||
data-scroll-speed="-3"
|
||||
data-scroll-direction="horizontal"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
of Production
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
<section className="section is-small">
|
||||
<h1 className="title is-1">
|
||||
Storyteller
|
||||
<figure className="image is-64x64 is-inline-block">
|
||||
<img src="/logo/storyteller_kitsune_logo_3000.png" alt="FakeYou's mascot!" />
|
||||
</figure>
|
||||
</h1>
|
||||
<h2 className="subtitle is-3">
|
||||
The future of production
|
||||
</h2>
|
||||
<p>We’re streamers and filmmakers building the components of the future Hollywood studio.</p>
|
||||
</section>
|
||||
|
||||
<section className="hero is-small">
|
||||
<div className="hero-body">
|
||||
<div className="columns is-vcentered">
|
||||
<div className="column is-one-third">
|
||||
<div className="mascot">
|
||||
<img src="/mascot/kitsune_pose2_black_2000.webp" alt="FakeYou's mascot!" />
|
||||
<div className="d-flex flex-column align-items-end">
|
||||
<p
|
||||
className="lead text-end w-50 hero-sub-title"
|
||||
data-scroll
|
||||
data-scroll-speed="-4"
|
||||
data-scroll-direction="horizontal"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
We’re streamers and filmmakers building the components of the
|
||||
future Hollywood studio.
|
||||
</p>
|
||||
<div
|
||||
data-scroll
|
||||
data-scroll-speed="-5"
|
||||
data-scroll-direction="horizontal"
|
||||
data-scroll-position="top"
|
||||
className="zi-10"
|
||||
>
|
||||
<a className="btn btn-primary" href="/">
|
||||
Explore
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="column">
|
||||
<p className="title is-3">
|
||||
1) <em>FakeYou</em> Social Deep Learning
|
||||
</p>
|
||||
<p className="subtitle is-5">
|
||||
FakeYou is used by millions of people every month.
|
||||
</p>
|
||||
<p>
|
||||
We've built a social platform for deep learning and generative models.
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<em>FakeYou</em> is a place where creators can upload and
|
||||
manage a variety of deep fake models: speech, music, lipsyncing, and more.
|
||||
Every day, artists and musicians use our tools to their to dub their
|
||||
creative work.
|
||||
We offer paid voice cloning services, an API with free
|
||||
and paid tiers, and in the future,
|
||||
our users will be able to monetize their own voices.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section is-small">
|
||||
<h1 className="title is-4">Try It!</h1>
|
||||
<h2 className="subtitle is-6">
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
We have nearly 1,500 voices (with more added every day), but we've selected
|
||||
a few to show off.
|
||||
</p>
|
||||
|
||||
<br />
|
||||
|
||||
<TtsComponent />
|
||||
|
||||
</section>
|
||||
|
||||
<section className="hero is-small">
|
||||
<div className="hero-body">
|
||||
|
||||
<h1 className="title is-4">Want to hear more?</h1>
|
||||
|
||||
<br />
|
||||
|
||||
<div className="columns">
|
||||
<div className="column">
|
||||
<a
|
||||
className="button is-fullwidth is-large is-info is-inverted"
|
||||
href="https://api.fakeyou.com/demo_mode/enable?redirect_to=https://fakeyou.com/"
|
||||
<div className="hero-title-outline noselect">
|
||||
<h1 className="hero-title d-flex flex-column text-center">
|
||||
<div
|
||||
className="hero-title-one align-items-center text-outline"
|
||||
data-scroll
|
||||
data-scroll-speed="-4"
|
||||
data-scroll-direction="horizontal"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
Check out our 1,500 other voices
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="column">
|
||||
<a
|
||||
className="button is-fullwidth is-large is-link is-info "
|
||||
href="https://api.fakeyou.com/demo_mode/enable?redirect_to=https://fakeyou.com/clone"
|
||||
The Future
|
||||
</div>
|
||||
<div
|
||||
className="hero-title-two text-outline"
|
||||
data-scroll
|
||||
data-scroll-speed="4"
|
||||
data-scroll-direction="horizontal"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
Then Clone <em>Your</em> Voice <FontAwesomeIcon icon={faUserCircle} />
|
||||
</a>
|
||||
of Production
|
||||
</div>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="hero is-small">
|
||||
<div className="hero-body">
|
||||
|
||||
<div className="d-flex justify-content-center">
|
||||
<img
|
||||
className="hero-img"
|
||||
src="/hero/hero-img.png"
|
||||
alt="Storyteller HyperJail"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="hero is-small is-link">
|
||||
<div className="hero-body">
|
||||
<div className="columns is-vcentered">
|
||||
|
||||
<div className="column">
|
||||
<p className="title is-3">
|
||||
2) <em>Storyteller TTS for Twitch</em>
|
||||
</p>
|
||||
<p className="subtitle is-5">
|
||||
Twitch Streamers and Creators can engage and monetize
|
||||
</p>
|
||||
<p>
|
||||
It’s tough to build an audience on Twitch. It's even tougher to earn an
|
||||
income. We've built the most comprehensive and engaging donation system
|
||||
for Twitch to date, letting audience members pay to use Deep Fake voices
|
||||
and emotes in their favorite streamers' live broadcasts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="column is-one-third">
|
||||
<div className="mascot">
|
||||
<img src="/mascot/kitsune_pose6_black_2000.webp" alt="FakeYou's mascot!" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className="title is-4">Get started with your channel!</h1>
|
||||
<h2 className="subtitle is-6">
|
||||
There's nothing to install. It's the easiest, most engaging, most fun system for Twitch yet.
|
||||
|
||||
<em><u>And it earns you money!</u></em>
|
||||
</h2>
|
||||
<a
|
||||
className="button is-fullwidth is-large is-info is-inverted"
|
||||
href="https://create.storyteller.io"
|
||||
>
|
||||
Add to your stream now! <FontAwesomeIcon icon={faTwitch} />
|
||||
<div
|
||||
className="d-flex social-icons flex-column gap-4 align-items-center"
|
||||
data-scroll
|
||||
data-scroll-speed="8"
|
||||
data-scroll-direction="horizontal"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
<a href="/">
|
||||
<FontAwesomeIcon icon={faDiscord} />
|
||||
</a>
|
||||
<a href="/">
|
||||
<FontAwesomeIcon icon={faTwitch} />
|
||||
</a>
|
||||
<a href="/">
|
||||
<FontAwesomeIcon icon={faFacebook} />
|
||||
</a>
|
||||
<a href="/">
|
||||
<FontAwesomeIcon icon={faTwitter} />
|
||||
</a>
|
||||
<a href="/">
|
||||
<FontAwesomeIcon icon={faPatreon} />
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="hero is-small">
|
||||
<div className="hero-body">
|
||||
|
||||
</div>
|
||||
<div className="bg-light section">
|
||||
<div className="container py-5">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
|
||||
ornare accumsan aliquam. Suspendisse sit amet volutpat tortor,
|
||||
pulvinar volutpat augue. Donec malesuada non dolor non pharetra. Donec
|
||||
convallis ut lectus non euismod. Nunc metus nisi, posuere quis quam
|
||||
sit amet, elementum molestie velit. Pellentesque pharetra nisi vel
|
||||
ipsum bibendum, et sagittis enim pretium. Pellentesque non lacus et
|
||||
mauris mattis ultrices a non turpis. Class aptent taciti sociosqu ad
|
||||
litora torquent per conubia nostra, per inceptos himenaeos. Aliquam
|
||||
consequat consequat justo vitae iaculis.
|
||||
<br />
|
||||
<br />
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
|
||||
ornare accumsan aliquam. Suspendisse sit amet volutpat tortor,
|
||||
pulvinar volutpat augue. Donec malesuada non dolor non pharetra. Donec
|
||||
convallis ut lectus non euismod. Nunc metus nisi, posuere quis quam
|
||||
sit amet, elementum molestie velit. Pellentesque pharetra nisi vel
|
||||
ipsum bibendum, et sagittis enim pretium. Pellentesque non lacus et
|
||||
mauris mattis ultrices a non turpis. Class aptent taciti sociosqu ad
|
||||
litora torquent per conubia nostra, per inceptos himenaeos. Aliquam
|
||||
consequat consequat justo vitae iaculis.
|
||||
<br />
|
||||
<br />
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
|
||||
ornare accumsan aliquam. Suspendisse sit amet volutpat tortor,
|
||||
pulvinar volutpat augue. Donec malesuada non dolor non pharetra. Donec
|
||||
convallis ut lectus non euismod. Nunc metus nisi, posuere quis quam
|
||||
sit amet, elementum molestie velit. Pellentesque pharetra nisi vel
|
||||
ipsum bibendum, et sagittis enim pretium. Pellentesque non lacus et
|
||||
mauris mattis ultrices a non turpis. Class aptent taciti sociosqu ad
|
||||
litora torquent per conubia nostra, per inceptos himenaeos. Aliquam
|
||||
consequat consequat justo vitae iaculis.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="hero is-small">
|
||||
<div className="hero-body">
|
||||
<div className="columns is-vcentered">
|
||||
<div className="column is-one-third">
|
||||
<div className="mascot">
|
||||
<img src="/mascot/kitsune_pose4_black_2000.webp" alt="FakeYou's mascot!" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="column">
|
||||
<p className="title is-3">
|
||||
3) <em>FakeYou Voice Changer</em>
|
||||
</p>
|
||||
<p className="subtitle is-5">
|
||||
Now you can sound like someone else
|
||||
</p>
|
||||
<p>
|
||||
Change how you sound in <em>real time</em>. Choose your next voice.
|
||||
Great for your stream, hanging out in VR, or filming that historical drama.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-light section">
|
||||
<div className="container py-5">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
|
||||
ornare accumsan aliquam. Suspendisse sit amet volutpat tortor,
|
||||
pulvinar volutpat augue. Donec malesuada non dolor non pharetra. Donec
|
||||
convallis ut lectus non euismod. Nunc metus nisi, posuere quis quam
|
||||
sit amet, elementum molestie velit. Pellentesque pharetra nisi vel
|
||||
ipsum bibendum, et sagittis enim pretium. Pellentesque non lacus et
|
||||
mauris mattis ultrices a non turpis. Class aptent taciti sociosqu ad
|
||||
litora torquent per conubia nostra, per inceptos himenaeos. Aliquam
|
||||
consequat consequat justo vitae iaculis.
|
||||
<br />
|
||||
<br />
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
|
||||
ornare accumsan aliquam. Suspendisse sit amet volutpat tortor,
|
||||
pulvinar volutpat augue. Donec malesuada non dolor non pharetra. Donec
|
||||
convallis ut lectus non euismod. Nunc metus nisi, posuere quis quam
|
||||
sit amet, elementum molestie velit. Pellentesque pharetra nisi vel
|
||||
ipsum bibendum, et sagittis enim pretium. Pellentesque non lacus et
|
||||
mauris mattis ultrices a non turpis. Class aptent taciti sociosqu ad
|
||||
litora torquent per conubia nostra, per inceptos himenaeos. Aliquam
|
||||
consequat consequat justo vitae iaculis.
|
||||
<br />
|
||||
<br />
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
|
||||
ornare accumsan aliquam. Suspendisse sit amet volutpat tortor,
|
||||
pulvinar volutpat augue. Donec malesuada non dolor non pharetra. Donec
|
||||
convallis ut lectus non euismod. Nunc metus nisi, posuere quis quam
|
||||
sit amet, elementum molestie velit. Pellentesque pharetra nisi vel
|
||||
ipsum bibendum, et sagittis enim pretium. Pellentesque non lacus et
|
||||
mauris mattis ultrices a non turpis. Class aptent taciti sociosqu ad
|
||||
litora torquent per conubia nostra, per inceptos himenaeos. Aliquam
|
||||
consequat consequat justo vitae iaculis.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="hero is-small">
|
||||
<div className="hero-body">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section is-small">
|
||||
<h1 className="title is-4">Voice changing demo</h1>
|
||||
<h2 className="subtitle is-6">
|
||||
</h2>
|
||||
|
||||
This is still an early beta. Voice quality will change and improve substantially over time.
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<div className="columns is-mobile has-text-centered">
|
||||
<div className="column">
|
||||
<AudioSample sampleUrl="/audio-samples/voice-conversion-1.mp3" />
|
||||
<br />
|
||||
<br />
|
||||
<p>
|
||||
<em>
|
||||
“I've got a huge announcement.
|
||||
This just sounds really, really great.
|
||||
And other than some phase distortion, artifacts,
|
||||
this is just sounding really great.
|
||||
And it's good for America.
|
||||
And voice synthesis is amazing.”
|
||||
</em>
|
||||
</p>
|
||||
</div>
|
||||
<div className="column">
|
||||
<AudioSample sampleUrl="/audio-samples/voice-conversion-2.mp3" />
|
||||
<br />
|
||||
<br />
|
||||
<p>
|
||||
<em>
|
||||
“My favorite game is Super Smash Bros Ultimate.
|
||||
It's a really, really great game.
|
||||
It's huge. There's so many characters.”
|
||||
</em>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="has-text-centered">
|
||||
Brandon <FontAwesomeIcon icon={faArrowRight} /> Donald Trump<br />
|
||||
Real time voice to voice conversion.
|
||||
</p>
|
||||
|
||||
</section>
|
||||
|
||||
<section className="section is-small">
|
||||
<h1 className="title is-4">Sign up for your very own voice changer</h1>
|
||||
<h2 className="subtitle is-6">
|
||||
We'll be rolling this out shortly. Get on the list! Tell us who you want to be.
|
||||
</h2>
|
||||
<a
|
||||
className="button is-fullwidth is-large is-info"
|
||||
href="https://api.fakeyou.com/demo_mode/enable?redirect_to=https://fakeyou.com/clone"
|
||||
>
|
||||
Transform my voice! <FontAwesomeIcon icon={faMicrophone} />
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section className="hero is-small">
|
||||
<div className="hero-body">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="hero is-small is-link">
|
||||
<div className="hero-body">
|
||||
<div className="columns is-vcentered">
|
||||
<div className="column">
|
||||
<p className="title is-3">
|
||||
4) <em>Storyteller VoxelCam</em>
|
||||
</p>
|
||||
<p className="subtitle is-5">
|
||||
Volumetric capture for your stream, and soon for your film set.
|
||||
</p>
|
||||
<p>
|
||||
Webcams are boring and flat. You can use our volumetric camera in-stream to make
|
||||
your personality come to life. This system can also be integrated into our
|
||||
no-cinema camera virtual set.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="column is-one-third">
|
||||
<div className="mascot">
|
||||
<img src="/mascot/kitsune_pose5_black_2000.webp" alt="FakeYou's mascot!" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className="title is-4">Volumetric cameras aren't limited to two dimensions</h1>
|
||||
<h2 className="subtitle is-6">
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
<Scene />
|
||||
</p>
|
||||
<br />
|
||||
|
||||
<h1 className="title is-4">Screenshots</h1>
|
||||
<h2 className="subtitle is-6">
|
||||
</h2>
|
||||
|
||||
<div className="columns">
|
||||
<div className="column">
|
||||
<figure className="image is-square">
|
||||
<img src="/screenshots/engine-fuji.png" alt="screenshot" />
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div className="column">
|
||||
<figure className="image is-square">
|
||||
<img src="/screenshots/engine-zelda-monsters.png" alt="screenshot" />
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div className="column">
|
||||
<figure className="image is-square">
|
||||
<img src="/screenshots/engine-point-cloud.png" alt="screenshot" />
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className="title is-4">Downloads coming soon</h1>
|
||||
<h2 className="subtitle is-6">
|
||||
For Windows, Mac, and Linux
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
You'll need a Microsoft Kinect (v1, v2, Azure Kinect) or Intel RealSense camera.
|
||||
We plan to support ordinary webcams too!
|
||||
</p>
|
||||
<br />
|
||||
|
||||
<article className="message is-danger">
|
||||
<div className="message-body">
|
||||
Downloads coming April 16th, 2022!
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
<div className="columns">
|
||||
<div className="column">
|
||||
<button
|
||||
className="button is-fullwidth is-large is-info is-inverted"
|
||||
>
|
||||
Windows <FontAwesomeIcon icon={faWindows} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="column">
|
||||
<button
|
||||
className="button is-fullwidth is-large is-info is-inverted"
|
||||
>
|
||||
Mac <FontAwesomeIcon icon={faApple} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="column">
|
||||
<button
|
||||
className="button is-fullwidth is-large is-info is-inverted"
|
||||
>
|
||||
Linux <FontAwesomeIcon icon={faLinux} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="hero is-small">
|
||||
<div className="hero-body">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="hero is-small">
|
||||
<div className="hero-body">
|
||||
<div className="columns is-vcentered">
|
||||
<div className="column is-one-third">
|
||||
<div className="mascot">
|
||||
<img src="/mascot/kitsune_pose9_black_2000.webp" alt="FakeYou's mascot!" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="column">
|
||||
<p className="title is-3">
|
||||
5) <em>Storyteller Engine</em>
|
||||
</p>
|
||||
<p className="subtitle is-5">
|
||||
A fully 3D virtual set for your stream or film
|
||||
</p>
|
||||
<p>
|
||||
Our community contributes sets, character models, props, events, and more.
|
||||
Use motion or volumetric capture.
|
||||
Your audience can control everything.
|
||||
Ideal for improv, news casts, interviews, gaming, fast virtual filmmaking,
|
||||
and much more!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section is-small">
|
||||
<div className="columns is-vcentered">
|
||||
<div className="column is-8">
|
||||
<video src="/video/webpage-demo-1-640.mp4" autoPlay={true} playsInline={true} loop={true} muted={true}></video>
|
||||
</div>
|
||||
<div className="column">
|
||||
<h3 className="title is-5">Volumetric Capture</h3>
|
||||
<p className="bd-notification is-primary">Use one or more cameras to build a 3D volumetric capture of your actors. In the future,
|
||||
we'll be upscaling from VGA-resolution depth maps to full 4K.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="columns is-vcentered">
|
||||
<div className="column is-8">
|
||||
<video src="/video/webpage-demo-2-640.mp4" autoPlay={true} playsInline={true} loop={true} muted={true}></video>
|
||||
</div>
|
||||
<div className="column">
|
||||
<h3 className="title is-5">Motion Capture</h3>
|
||||
<p className="bd-notification is-primary">Community-contributed models, sets, and scenarios can be controlled with webcam,
|
||||
Kinect, or motion capture systems and directed remotely from the web.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="columns is-vcentered">
|
||||
<div className="column is-8">
|
||||
<video src="/video/webpage-demo-3-640.mp4" autoPlay={true} playsInline={true} loop={true} muted={true}></video>
|
||||
</div>
|
||||
<div className="column">
|
||||
<h3 className="title is-5">Fake Faces, Voices, and Corrected Motion</h3>
|
||||
<p className="bd-notification is-primary">We couldn't hire Elon Musk, but that didn't stop us and it won't stop you.
|
||||
Change your actors faces and voices to fit your needs. Tweak their movements and posture — even the location
|
||||
and lighting — all post capture.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section is-small">
|
||||
<h1 className="title is-4">Apply for our beta program</h1>
|
||||
<h2 className="subtitle is-6">
|
||||
We need early testers and contributors
|
||||
</h2>
|
||||
<p>
|
||||
Are you a streamer or filmmaker? Want to help us test
|
||||
and develop Storyteller Engine into the best tool ever
|
||||
created for making narrative content?
|
||||
</p>
|
||||
<br />
|
||||
<a
|
||||
className="button is-fullwidth is-large is-info"
|
||||
href="https://discord.gg/H72KFXm"
|
||||
>
|
||||
Ask us in Discord! <FontAwesomeIcon icon={faFlask} />
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section className="hero is-small">
|
||||
<div className="hero-body">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="hero is-small">
|
||||
<div className="hero-body">
|
||||
<p className="title is-3">
|
||||
Press and social media mentions
|
||||
</p>
|
||||
<p className="subtitle is-5">
|
||||
This is only a sample of our hundreds of mentions across the web
|
||||
</p>
|
||||
|
||||
<div className="columns is-vcentered has-text-centered">
|
||||
|
||||
<div className="column is-one-third">
|
||||
<div className="card">
|
||||
<div className="card-content">
|
||||
<div className="content">
|
||||
<p>
|
||||
<FontAwesomeIcon icon={faQuoteLeft} />
|
||||
Tool of the Week: AI voice generator | [FakeYou ...] is a window into
|
||||
the future [...]. Play with it with a number of celebrity voices, including Judi Dench,
|
||||
Neil DeGrasse Tyson, and Bill Gates.</p>
|
||||
|
||||
<p>Techstars</p>
|
||||
|
||||
<figure className="image is-64x64 is-inline-block">
|
||||
<img src="/press-logos/techstars_logo.png" className="is-rounded" alt="logo" />
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="column is-one-third">
|
||||
<div className="card">
|
||||
<div className="card-content">
|
||||
<div className="content">
|
||||
<p>
|
||||
<FontAwesomeIcon icon={faQuoteLeft} />
|
||||
無料でビル・ゲイツやアーノルド・シュワルツネッガーなど有名人に好きな台詞をしゃべらせることができる「Vocodes」レビュー</p>
|
||||
<p>
|
||||
("Vocodes" [now FakeYou] allows users to use celebrities such as Bill Gates and
|
||||
Arnold Schwarzenegger to speak their favorite lines for free.)</p>
|
||||
|
||||
<p>Gigazine</p>
|
||||
|
||||
<figure className="image is-64x64 is-inline-block">
|
||||
<img src="/press-logos/gigazine_g.jpg" className="is-rounded" alt="logo" />
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="column is-one-third">
|
||||
<div className="card">
|
||||
<div className="card-content">
|
||||
<div className="content">
|
||||
<p>
|
||||
<FontAwesomeIcon icon={faQuoteLeft} />
|
||||
Have you ever wanted David Attenborough to narrate your audiobook?
|
||||
Judi Dench to read your shopping list? Gilbert Gottfried to... well... some things are better left unsaid.
|
||||
</p>
|
||||
|
||||
<p>Shots</p>
|
||||
|
||||
<figure className="image is-64x64 is-inline-block">
|
||||
<img src="/press-logos/shots.png" className="is-rounded" alt="logo" />
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="columns is-vcentered has-text-centered">
|
||||
|
||||
<div className="column is-one-third">
|
||||
<div className="card">
|
||||
<div className="card-content">
|
||||
<div className="content">
|
||||
<p>
|
||||
<FontAwesomeIcon icon={faQuoteLeft} />
|
||||
Un truco secreto de WhatsApp se acaba de volver tendencia en las redes sociales,
|
||||
sobre todo entre los fanáticos de Dragon Ball Super, debido a que permite que los
|
||||
usuarios puedan enviar audios con la voz de Gokú,
|
||||
</p>
|
||||
<p>(A secret WhatsApp trick has just become a trend on social networks , especially
|
||||
among Dragon Ball Super fans , because it allows users to send audios with the
|
||||
voice of Goku</p>
|
||||
|
||||
<p>La República</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="column is-one-third">
|
||||
<div className="card">
|
||||
<div className="card-content">
|
||||
<div className="content">
|
||||
<p>
|
||||
<FontAwesomeIcon icon={faQuoteLeft} />
|
||||
We’ve previously seen apps like this, but Vocodes [now FakeYou] impresses with the sheer
|
||||
volume of voices available to test out.
|
||||
</p>
|
||||
<p>TheNextWeb</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="column is-one-third">
|
||||
<div className="card">
|
||||
<div className="card-content">
|
||||
<div className="content">
|
||||
<p>
|
||||
<FontAwesomeIcon icon={faQuoteLeft} />
|
||||
[Digital artist Glenn Marshall's recent project employs]
|
||||
a classic 19th-century
|
||||
poem as AI-imaging fuel alongside an uncanny narration from an artificial Christopher Lee.
|
||||
To make "In the Bleak Midwinter" even more, uh, bleak, Marshall then employed software called
|
||||
vo.codes [now FakeYou] to approximate a poetic narration in the voice of the late Sir Christopher Lee.
|
||||
[...] to be honest with you, we initially thought Marshall simply dubbed an old audio recording of
|
||||
Lee actually reading the poem, that's how convincing the result is.</p>
|
||||
|
||||
<p>Input</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section is-small">
|
||||
<h1 className="title is-4">We're hiring!</h1>
|
||||
<h2 className="subtitle is-6">
|
||||
Fun and challenging tech. World-changing mission.
|
||||
</h2>
|
||||
<p>
|
||||
We already have incredible traction, but there's
|
||||
no better time to help us make an impact.
|
||||
</p>
|
||||
<br />
|
||||
<Link
|
||||
className="button is-fullwidth is-large is-info"
|
||||
to="/jobs"
|
||||
>
|
||||
Learn More and Apply
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4258,6 +4258,11 @@ before-after-hook@^2.2.0:
|
||||
resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.2.tgz#a6e8ca41028d90ee2c24222f201c90956091613e"
|
||||
integrity sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ==
|
||||
|
||||
bezier-easing@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/bezier-easing/-/bezier-easing-2.1.0.tgz#c04dfe8b926d6ecaca1813d69ff179b7c2025d86"
|
||||
integrity sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==
|
||||
|
||||
bfj@^7.0.2:
|
||||
version "7.0.2"
|
||||
resolved "https://registry.yarnpkg.com/bfj/-/bfj-7.0.2.tgz#1988ce76f3add9ac2913fd8ba47aad9e651bfbb2"
|
||||
@@ -4283,6 +4288,11 @@ binary-extensions@^2.0.0:
|
||||
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
|
||||
integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
|
||||
|
||||
bindall-standalone@^1.0.5:
|
||||
version "1.0.5"
|
||||
resolved "https://registry.yarnpkg.com/bindall-standalone/-/bindall-standalone-1.0.5.tgz#f7430388f1c7f9a9ade0fc75a400e710f6692a1d"
|
||||
integrity sha512-HDI7YBWXVJk/eoGz+e4lYQQJnYp1ZHcUvAY71lVptLMhQnDm86vD73AGPw2qIlgYR3P0bjmoAcXiA8qhFejBhA==
|
||||
|
||||
bindings@^1.5.0:
|
||||
version "1.5.0"
|
||||
resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
|
||||
@@ -9010,6 +9020,11 @@ lerna@^4.0.0:
|
||||
import-local "^3.0.2"
|
||||
npmlog "^4.1.2"
|
||||
|
||||
lethargy@^1.0.2:
|
||||
version "1.0.9"
|
||||
resolved "https://registry.yarnpkg.com/lethargy/-/lethargy-1.0.9.tgz#138b0ae384d015c5233e0cc1eeba4d089af3c58b"
|
||||
integrity sha512-nFM8blpCF9rqIL5mRAaTGc78W8oQixVtsD86jbEPvcI13+lDUYJf3R7DZQQL7tCiBpbGpGKMX2gwJFO9hiaOkg==
|
||||
|
||||
leven@^3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
|
||||
@@ -9156,6 +9171,15 @@ locate-path@^6.0.0:
|
||||
dependencies:
|
||||
p-locate "^5.0.0"
|
||||
|
||||
locomotive-scroll@^4.1.4:
|
||||
version "4.1.4"
|
||||
resolved "https://registry.yarnpkg.com/locomotive-scroll/-/locomotive-scroll-4.1.4.tgz#a6d83ba3c07a9c51fc1a6d95b4be614d4dc5aad2"
|
||||
integrity sha512-6i98cFF2SKg6wIPpwVPuo2FG8qL3USsdDeew78TEYZyLoqleMWNfkSDpWA6mPym4dOfTIBXc678VmGlkgx3fTA==
|
||||
dependencies:
|
||||
bezier-easing "^2.1.0"
|
||||
smoothscroll-polyfill "^0.4.4"
|
||||
virtual-scroll "^1.5.2"
|
||||
|
||||
lodash._reinterpolate@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
|
||||
@@ -11650,6 +11674,14 @@ react-is@^17.0.1:
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
|
||||
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
|
||||
|
||||
react-locomotive-scroll@^0.2.2:
|
||||
version "0.2.2"
|
||||
resolved "https://registry.yarnpkg.com/react-locomotive-scroll/-/react-locomotive-scroll-0.2.2.tgz#50fd3982b5386cd3e4196d391cbdd327c0523079"
|
||||
integrity sha512-F+1JCUNw2sU/g+wtvbxh8Oi4FPrhPQFKY7QlK0p3D0kl2JgK0FK9fF1G43wcZccP8YBrKU81T4ZQBf/DasgVOg==
|
||||
dependencies:
|
||||
use-debounce "6.0.1"
|
||||
use-resize-observer "6.1.0"
|
||||
|
||||
react-refresh@^0.11.0:
|
||||
version "0.11.0"
|
||||
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
|
||||
@@ -12096,6 +12128,11 @@ requires-port@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
|
||||
integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
|
||||
|
||||
resize-observer-polyfill@^1.5.1:
|
||||
version "1.5.1"
|
||||
resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
|
||||
integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
|
||||
|
||||
resolve-cwd@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
|
||||
@@ -12564,6 +12601,11 @@ smart-buffer@^4.1.0:
|
||||
resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
|
||||
integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==
|
||||
|
||||
smoothscroll-polyfill@^0.4.4:
|
||||
version "0.4.4"
|
||||
resolved "https://registry.yarnpkg.com/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz#3a259131dc6930e6ca80003e1cb03b603b69abf8"
|
||||
integrity sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==
|
||||
|
||||
snapdragon-node@^2.0.1:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
|
||||
@@ -13416,6 +13458,11 @@ timsort@^0.3.0:
|
||||
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
|
||||
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
|
||||
|
||||
tiny-emitter@^1.0.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-1.2.0.tgz#6dc845052cb08ebefc1874723b58f24a648c3b6f"
|
||||
integrity sha512-rWjF00inHeWtT5UbQYAXoMI4hL6TRMqohuKCsODyPYYmfAxqfMnXLsIeNrbdPEkNxlk++rojVilTnI9IVmEBtA==
|
||||
|
||||
tiny-invariant@^1.0.2:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"
|
||||
@@ -13843,6 +13890,18 @@ url@^0.11.0:
|
||||
punycode "1.3.2"
|
||||
querystring "0.2.0"
|
||||
|
||||
use-debounce@6.0.1:
|
||||
version "6.0.1"
|
||||
resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-6.0.1.tgz#ed1eb2b30189408fb9792ea2887f4c6c3cb401a3"
|
||||
integrity sha512-kpvIxpa0vOLz/2I2sfNJ72mUeaT2CMNCu5BT1f2HkV9qZK27UVSOFf1sSSu+wjJE4TcR2VTXS2SM569+m3TN7Q==
|
||||
|
||||
use-resize-observer@6.1.0:
|
||||
version "6.1.0"
|
||||
resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-6.1.0.tgz#d4d267a940dbf9c326da6042f8a4bb8c89d29729"
|
||||
integrity sha512-SiPcWHiIQ1CnHmb6PxbYtygqiZXR0U9dNkkbpX9VYnlstUwF8+QqpUTrzh13pjPwcjMVGR+QIC+nvF5ujfFNng==
|
||||
dependencies:
|
||||
resize-observer-polyfill "^1.5.1"
|
||||
|
||||
use@^3.1.0:
|
||||
version "3.1.1"
|
||||
resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
|
||||
@@ -13952,6 +14011,16 @@ verror@1.10.0:
|
||||
core-util-is "1.0.2"
|
||||
extsprintf "^1.2.0"
|
||||
|
||||
virtual-scroll@^1.5.2:
|
||||
version "1.5.2"
|
||||
resolved "https://registry.yarnpkg.com/virtual-scroll/-/virtual-scroll-1.5.2.tgz#cdc051135ea6a1ebaaecdd4a4f39b8ed807f0f53"
|
||||
integrity sha512-7jDHwlKbHUho7CYU/HojE/VKFH8GV9P5fVWP2HCa7dRUOpVvwl93OBOKIIcb2mKd+vqsbVR/0zl0X70+3sUZqA==
|
||||
dependencies:
|
||||
bindall-standalone "^1.0.5"
|
||||
lethargy "^1.0.2"
|
||||
object-assign "^4.0.1"
|
||||
tiny-emitter "^1.0.0"
|
||||
|
||||
vm-browserify@^1.0.1:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
|
||||
|
||||
Reference in new issue
Block a user