diff --git a/packages/storyteller.io/public/hero/storyteller-hero.mp4 b/packages/storyteller.io/public/hero/storyteller-hero.mp4 new file mode 100644 index 0000000000..1e4909b5b5 Binary files /dev/null and b/packages/storyteller.io/public/hero/storyteller-hero.mp4 differ diff --git a/packages/storyteller.io/public/images/screenshots/fakeyou-screen-mobile.webp b/packages/storyteller.io/public/images/screenshots/fakeyou-screen-mobile.webp deleted file mode 100644 index 271684d156..0000000000 Binary files a/packages/storyteller.io/public/images/screenshots/fakeyou-screen-mobile.webp and /dev/null differ diff --git a/packages/storyteller.io/public/images/screenshots/fakeyou-screen.webp b/packages/storyteller.io/public/images/screenshots/fakeyou-screen.webp deleted file mode 100644 index 6289aa7b61..0000000000 Binary files a/packages/storyteller.io/public/images/screenshots/fakeyou-screen.webp and /dev/null differ diff --git a/packages/storyteller.io/public/images/screenshots/fakeyou-tts-screen.webp b/packages/storyteller.io/public/images/screenshots/fakeyou-tts-screen.webp new file mode 100644 index 0000000000..d4737b95b4 Binary files /dev/null and b/packages/storyteller.io/public/images/screenshots/fakeyou-tts-screen.webp differ diff --git a/packages/storyteller.io/public/images/screenshots/fakeyou-v2v-screen.webp b/packages/storyteller.io/public/images/screenshots/fakeyou-v2v-screen.webp new file mode 100644 index 0000000000..393e636ca3 Binary files /dev/null and b/packages/storyteller.io/public/images/screenshots/fakeyou-v2v-screen.webp differ diff --git a/packages/storyteller.io/public/images/screenshots/powerstream-screen-mobile.webp b/packages/storyteller.io/public/images/screenshots/powerstream-screen-mobile.webp deleted file mode 100644 index c1ec56c6f4..0000000000 Binary files a/packages/storyteller.io/public/images/screenshots/powerstream-screen-mobile.webp and /dev/null differ diff --git a/packages/storyteller.io/public/images/screenshots/powerstream-screen.webp b/packages/storyteller.io/public/images/screenshots/powerstream-screen.webp deleted file mode 100644 index dce5319220..0000000000 Binary files a/packages/storyteller.io/public/images/screenshots/powerstream-screen.webp and /dev/null differ diff --git a/packages/storyteller.io/public/images/team/scott-old.webp b/packages/storyteller.io/public/images/team/scott-old.webp new file mode 100644 index 0000000000..06dfc3f63b Binary files /dev/null and b/packages/storyteller.io/public/images/team/scott-old.webp differ diff --git a/packages/storyteller.io/public/images/team/scott.webp b/packages/storyteller.io/public/images/team/scott.webp index 06dfc3f63b..c13dedee54 100644 Binary files a/packages/storyteller.io/public/images/team/scott.webp and b/packages/storyteller.io/public/images/team/scott.webp differ diff --git a/packages/storyteller.io/public/images/vision.webp b/packages/storyteller.io/public/images/vision.webp new file mode 100644 index 0000000000..ab64470580 Binary files /dev/null and b/packages/storyteller.io/public/images/vision.webp differ diff --git a/packages/storyteller.io/public/video/Automatic-Lipsync.mp4 b/packages/storyteller.io/public/video/Automatic-Lipsync.mp4 new file mode 100644 index 0000000000..def651ffda Binary files /dev/null and b/packages/storyteller.io/public/video/Automatic-Lipsync.mp4 differ diff --git a/packages/storyteller.io/public/video/Facetrack.mp4 b/packages/storyteller.io/public/video/Facetrack.mp4 new file mode 100644 index 0000000000..0dd97119ba Binary files /dev/null and b/packages/storyteller.io/public/video/Facetrack.mp4 differ diff --git a/packages/storyteller.io/public/video/Mocap.mp4 b/packages/storyteller.io/public/video/Mocap.mp4 new file mode 100644 index 0000000000..d4014c36da Binary files /dev/null and b/packages/storyteller.io/public/video/Mocap.mp4 differ diff --git a/packages/storyteller.io/public/video/News.mp4 b/packages/storyteller.io/public/video/News.mp4 new file mode 100644 index 0000000000..1e87b98f51 Binary files /dev/null and b/packages/storyteller.io/public/video/News.mp4 differ diff --git a/packages/storyteller.io/src/App.scss b/packages/storyteller.io/src/App.scss index 1a2154dab0..77c00f3acc 100644 --- a/packages/storyteller.io/src/App.scss +++ b/packages/storyteller.io/src/App.scss @@ -4,6 +4,7 @@ $light-text-color: #777; $button-text-color: #666; $primary: #fa6b68; +$secondary: #36364e; $white: #ffffff; $heading-font-family: "Poppins", sans-serif; @@ -40,6 +41,11 @@ p { font-weight: 400; } +li { + font-size: 18px; + line-height: 1.6; +} + ::-moz-selection { /* Code for Firefox */ color: $white; @@ -57,11 +63,15 @@ p { } .container { - max-width: 1200px; + max-width: 1300px; padding-right: var(--bs-gutter-x, 1.2rem); padding-left: var(--bs-gutter-x, 1.2rem); } +.rounded { + border-radius: 0.5rem !important; +} + .git-sha { color: #999; font-size: 0.8rem; @@ -77,18 +87,6 @@ p { 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; - overflow: hidden; - position: relative; -} - .bg-hero-2 { background: rgb(34, 34, 56); background: linear-gradient( @@ -101,23 +99,6 @@ p { position: relative; } -.bg-overlay { - width: 100%; - height: 100%; - background-color: rgba(11, 12, 20, 0.6); - position: absolute; - top: 0; -} - -.bg-video { - object-fit: cover; - width: 100vw; - height: 100vh; - position: absolute; - top: 0; - left: 0; -} - #logo { transition: 0.3s all; @@ -204,7 +185,7 @@ p { } .btn { - border-radius: 5px; + border-radius: 50px; outline: none; font-size: 16px; font-weight: 500; @@ -246,20 +227,20 @@ p { .btn-secondary, .btn-secondary:focus, .btn-secondary:active { - background-color: $white; - color: #2c2c40; + background-color: $secondary; + color: $white; border: 2.5px solid; - border-color: $white; + border-color: $secondary; transition: 0.2s; outline: none; box-shadow: none; -} -.btn-secondary:hover { - background-color: #ccc; - color: #2c2c40; - border: 2.5px solid; - border-color: #ccc; + &:hover { + background-color: lighten($secondary, 3%) !important; + border-color: lighten($secondary, 3%) !important; + color: $white; + border: 2.5px solid; + } } .btn span { @@ -291,88 +272,45 @@ p { font-size: 16px; } -.hero-title { - font-size: 5.6rem; - font-weight: 700; - width: 100%; - // letter-spacing: 3px; - text-shadow: 0px 5px 12px rgba(#0d0d14, 0.2); - z-index: 1; - // white-space: nowrap; - margin: 0; - line-height: 1.1; +.hero-video { + z-index: 2; + border: 3px solid; + border-color: rgba(#4d4d66, 0.5); + border-radius: 1.5rem !important; + overflow: hidden; + object-fit: cover; - .hero-title-one { - text-align: left; - overflow: hidden; - margin: 0; - line-height: 1; - padding-bottom: 12px; - - span { - color: $primary; - } + video { + width: 100%; } } -.hero-title-container { - position: absolute; - bottom: 100px; - padding: 0; +.hero-video-container { + width: 1000px; + margin-bottom: -18rem; +} + +.video-bottom { + margin-bottom: 18rem; +} + +.hero-title { + font-size: 3.6rem; + font-weight: 700; + width: 90%; + z-index: 1; + margin: 0; + line-height: 1.3; } .hero-sub-title { font-weight: 400; - font-size: 24px; - margin-top: -18px; - color: #e7e7e7; + font-size: 1.3rem; + width: 65%; + color: rgba($white, 0.7); line-height: 1.4; } -// .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; -// position: relative; - -// .hero-title-one { -// text-align: left; -// overflow: hidden; - -// span { -// color: $primary; -// } -// } - -// .hero-title-two { -// margin-top: -35px; -// text-align: right; -// overflow: hidden; -// } -// } - -// .hero-sub-title { -// max-width: 320px; -// margin-top: -10px; -// text-align: end; -// font-size: 18px; -// } - -// .hero-title-outline { -// position: absolute; -// width: 100%; -// transform: scale(1.72); -// top: -44px; -// overflow: hidden; -// -webkit-text-stroke: 1px rgba($white, 0.06); -// } - .text-outline { color: transparent; -webkit-text-stroke: 1px rgba($white, 0.06); @@ -504,6 +442,22 @@ p { ); } +.bg-hero { + background: rgb(25, 25, 41); + background: linear-gradient( + 180deg, + rgba(23, 23, 37, 1) 0%, + rgba(29, 29, 48, 1) 100% + ); +} + +// .bg-video { +// position: absolute; +// width: 100%; +// -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ +// filter: grayscale(100%); +// } + .section { margin-top: -1px; padding-top: 5rem; @@ -597,7 +551,7 @@ p { .card { height: 100%; padding: 28px; - border-radius: 8px; + border-radius: 0.5rem; border: 2px solid; border-color: rgba(#4d4d66, 0.5); display: flex; @@ -720,7 +674,7 @@ p { .footer-social-icon { background: rgb(47, 47, 75); - border-radius: 8px; + border-radius: 0.5rem; height: 50px; width: 50px; display: flex; @@ -776,7 +730,7 @@ p { .form-select { border-width: 1px; border-color: $white; - border-radius: 5px; + border-radius: 0.5rem; padding: 0.5rem 0.75rem; &:focus { @@ -956,7 +910,6 @@ $font: montserrat, sans-serif; display: block; height: 25%; height: calc(100% / 4); - min-height: 50px; position: relative; opacity: 0; @@ -973,17 +926,17 @@ $font: montserrat, sans-serif; width: 100%; } - &:after { - content: ""; - position: absolute; - bottom: 0; - left: 50%; - width: 0%; - transform: translateX(-50%); - height: 3px; - background: $color-link; - transition: 0.35s; - } + // &:after { + // content: ""; + // position: absolute; + // bottom: 0; + // left: 50%; + // width: 0%; + // transform: translateX(-50%); + // height: 3px; + // background: $color-link; + // transition: 0.35s; + // } } } } @@ -1016,6 +969,7 @@ $font: montserrat, sans-serif; } .about-card { + border-radius: 0.5rem; min-height: 185px; line-height: 1.5; padding: 28px; @@ -1034,7 +988,7 @@ $font: montserrat, sans-serif; } .img-border { - border-radius: 8px; + border-radius: 0.5rem; border: 2px solid; border-color: rgba(#4d4d66, 0.5); } @@ -1094,6 +1048,49 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; } +.research-swiper { + height: 100%; + + .research-swiper-thumb-container { + max-height: 500px; + + .swiper-slide { + display: flex; + align-items: center; + border-radius: 0.5rem !important; + height: 60px !important; + background-color: $secondary; + padding: 2rem 1.5rem; + cursor: pointer; + border: 2px solid; + border-color: $secondary; + transition: 0.2s all; + + &:hover { + background-color: rgb(37, 37, 56); + border-color: lighten($secondary, 10%); + } + } + + .swiper-slide-thumb-active { + background-color: #161624 !important; + border-color: $primary !important; + } + } + + .research-swiper-video-container { + border-radius: 0.5rem; + border: 2px solid; + border-color: rgba(#4d4d66, 1); + + .swiper-slide { + video { + object-fit: cover; + } + } + } +} + :root { --swiper-theme-color: #fa6b68 !important; } @@ -1134,43 +1131,46 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active { } } -.img-team { - border-radius: 8px; +.border-frame { border: 2px solid; - border-color: rgba(#4d4d66, 1); + border-color: $secondary; +} + +.panel { + background-color: #181827; + border-radius: 0.5rem; + overflow: hidden; + border: 2px solid; + border-color: $secondary; +} + +.img-team { + border-bottom: 2px solid; + border-color: $secondary; } .team-role-text { padding-top: 2px; line-height: 1.4; + margin-bottom: 0; } -.img-layers { - display: flex; - position: relative; +#hero-title { + opacity: 0; + transform: translate(-8rem, 0); +} - .img-front-right { - position: absolute; - max-width: 380px; - right: -14%; - bottom: 12%; - } +#sub-title { + opacity: 0; + transform: translate(8rem, 0); +} - .img-front-left { - position: absolute; - max-width: 380px; - left: -14%; - bottom: 12%; - } +#hero-btn { + opacity: 0; + transform: translate(4rem, 0); - .img-back { - border-radius: 8px; - border: 2px solid; - border-color: rgba(#4d4d66, 0.25); - } - - .img-mascot { - filter: drop-shadow(0px 0px 50px rgba(0, 0, 0, 0.95)); + .btn-primary { + padding: 1rem 2.4rem; } } @@ -1201,31 +1201,6 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active { border-radius: 0 0 0 0; } - // .hero-title { - // font-size: 8vw; - // white-space: nowrap; - // line-height: 1; - // // letter-spacing: normal; - - // .hero-title-one { - // text-align: center; - // } - - // .hero-title-two { - // text-align: center; - // margin: 0; - // } - // } - - .hero-title { - font-size: 6.5vw; - } - - .hero-sub-title { - font-size: 22px; - margin-top: 18px; - } - .lead { font-size: 18px; } @@ -1274,10 +1249,6 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active { left: 0; } } - - .bg-hero-2 { - height: 800px; - } } @media (max-width: 767.98px) { @@ -1304,20 +1275,6 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active { height: 180px; } - // .bg-hero { - // min-height: 1020px; - // max-height: 1020px; - // } - - .hero-title { - font-size: 11.5vw; - } - - .hero-sub-title { - font-size: 18px; - margin-top: 18px; - } - .shape-1-container { left: 12%; bottom: 14%; @@ -1389,32 +1346,39 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active { } } - .bg-hero-2 { - height: 670px; + .hero-title { + font-size: 2rem; + width: 100%; + } + + .hero-sub-title { + font-size: 16px; + width: 100%; + } + + .hero-video-container { + margin-bottom: -6rem; + } + + .video-bottom { + margin-bottom: 6rem; + } + + .hero-video { + border-radius: 0.8rem !important; + } + + #hero-btn { + .btn-primary { + padding: 0.8rem 1.8rem; + font-size: 15px; + } + } + + .img-brandon { + border-bottom-right-radius: 0.5rem; + border-color: $secondary !important; + border-bottom: 2px solid; + border-right: 2px solid; } } - -#sub-title { - opacity: 0; - transform: translate(8rem, 0); -} - -#hero-btn { - opacity: 0; - transform: translate(4rem, 0); -} - -// #pascal { -// opacity: 0; -// transform: translate(0, 300px); -// } - -// #basilisk { -// opacity: 0; -// transform: translate(300px, 0); -// } - -// #roko { -// opacity: 0; -// transform: translate(-300px, 0); -// } diff --git a/packages/storyteller.io/src/App.tsx b/packages/storyteller.io/src/App.tsx index b8faa703c0..b9f2c4afaf 100644 --- a/packages/storyteller.io/src/App.tsx +++ b/packages/storyteller.io/src/App.tsx @@ -36,7 +36,7 @@ function App() { containerRef={containerRef} > -
+
diff --git a/packages/storyteller.io/src/common/TopNav.tsx b/packages/storyteller.io/src/common/TopNav.tsx index 993391f67e..300d14e675 100644 --- a/packages/storyteller.io/src/common/TopNav.tsx +++ b/packages/storyteller.io/src/common/TopNav.tsx @@ -44,9 +44,9 @@ function TopNav(props: Props) { ? "container-fluid nav-scroll" : "container-fluid"; - const backToTop = showTopBtn - ? "btn-to-top nav-link show" - : "btn-to-top nav-link"; + // const backToTop = showTopBtn + // ? "btn-to-top nav-link show" + // : "btn-to-top nav-link"; const [mobileMenuOpen, setMobileMenuOpen] = useState(false); @@ -145,31 +145,31 @@ function TopNav(props: Props) {
  • - Social AI + Vision + +
    • +
  • + + Products
  • - Film - -
    • -
  • - - Music + Research
  • @@ -179,7 +179,7 @@ function TopNav(props: Props) { className="nav-link" data-scroll-to > - Our Team + Team
    • @@ -230,24 +230,23 @@ function TopNav(props: Props) {
  • - - Social AI + + Vision
  • - - Film + + Products
  • - - Music + + Research
    • -
  • - Our Team + Team
  • @@ -265,10 +264,10 @@ function TopNav(props: Props) {
    • - + {/*
    Back to Top -     + */} ); } diff --git a/packages/storyteller.io/src/locomotive-scroll.scss b/packages/storyteller.io/src/locomotive-scroll.scss index b865d4a1fd..89260340fb 100644 --- a/packages/storyteller.io/src/locomotive-scroll.scss +++ b/packages/storyteller.io/src/locomotive-scroll.scss @@ -1,4 +1,8 @@ /*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ +#scroller { + will-change: transform; +} + html.has-scroll-smooth { overflow: hidden; position: fixed; @@ -85,3 +89,9 @@ html.has-scroll-dragging { right: auto; bottom: 0; } + +@media (max-width: 992px) { + #scroller { + will-change: initial; + } +} diff --git a/packages/storyteller.io/src/pages/index/IndexPage-old b/packages/storyteller.io/src/pages/index/IndexPage-old new file mode 100644 index 0000000000..5faed59d1e --- /dev/null +++ b/packages/storyteller.io/src/pages/index/IndexPage-old @@ -0,0 +1,1102 @@ +// import { +// faDiscord, +// faFacebook, +// faTwitch, +// faTwitter, +// } from "@fortawesome/free-brands-svg-icons"; +// import { +// faBookOpen, +// faClapperboard, +// faCube, +// faDrum, +// faPaintbrush, +// faPersonWalkingArrowRight, +// } from "@fortawesome/free-solid-svg-icons"; +// import { +// faUserCowboy, +// faPaintbrushPencil, +// faMicrophoneStand, +// faWaveformLines, +// faMusic, +// faUserMusic, +// } from "@fortawesome/pro-solid-svg-icons"; +// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +// import Marquee from "react-fast-marquee"; +// import Tippy from "@tippyjs/react"; +// import "tippy.js/dist/tippy.css"; +// // import AudioSample from "./AudioSample"; +// import { useEffect, useRef } from "react"; +// import gsap from "gsap"; +// import SplitType from "split-type"; +// // import Scene from "./Scene"; +// import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks"; +// import { Swiper, SwiperSlide } from "swiper/react"; +// import "swiper/css"; +// import "swiper/css/pagination"; +// import { Autoplay, Pagination } from "swiper"; +// import Tilt from "react-parallax-tilt"; + +// function IndexPage() { +// // NB: React video bug: +// // https://stackoverflow.com/questions/61510160/why-muted-attribute-on-video-tag-is-ignored-in-react +// // https://stackoverflow.com/questions/61510160/why-muted-attribute-on-video-tag-is-ignored-in-react +// const videoRef: any = useRef(null); +// const videoRefMobile: any = useRef(null); + +// // Title Animation +// useEffect(() => { +// const splitTitleOutline = new SplitType("#hero-title-outline", { +// types: "words", +// wordClass: "title-outline-split", +// }); + +// console.log(splitTitleOutline); + +// var tl = gsap.timeline({ delay: 0.2 }); + +// tl.to( +// "#sub-title", +// { +// delay: 0.4, +// duration: 0.8, +// x: 0, +// scale: 1, +// opacity: 1, +// ease: "expo", +// }, +// "<" +// ); +// tl.to( +// "#hero-btn", +// { +// delay: 0.2, +// duration: 0.8, +// x: 0, +// scale: 1, +// opacity: 1, +// ease: "expo", +// }, +// "<" +// ); +// }, []); + +// useEffect(() => { +// if (!!videoRef.current) { +// videoRef.current.setAttribute("muted", "true"); +// videoRef.current.setAttribute("autoplay", "true"); +// videoRef.current.setAttribute("loop", "true"); +// videoRef.current.setAttribute("playsinline", "true"); +// videoRef.current.setAttribute("disablepictureinpicture", "true"); +// videoRef.current.setAttribute("preload", "auto"); +// videoRef.current.muted = true; +// videoRef.current.play(); +// } +// }, [videoRef]); + +// useEffect(() => { +// if (!!videoRefMobile.current) { +// videoRefMobile.current.setAttribute("muted", "true"); +// videoRefMobile.current.setAttribute("autoplay", "true"); +// videoRefMobile.current.setAttribute("loop", "true"); +// videoRefMobile.current.setAttribute("playsinline", "true"); +// videoRefMobile.current.setAttribute("disablepictureinpicture", "true"); +// videoRefMobile.current.setAttribute("preload", "auto"); +// videoRefMobile.current.muted = true; +// videoRefMobile.current.play(); +// } +// }, [videoRefMobile]); + +// return ( +//
    +//
    +// +//
    +//
    +//
    +// {/* Desktop Title */} +//

    +// +// Enabling Anyone to Create High Quality Movies and Music with +// AI +// +//

    + +//

    +// We are combining generative AI and User Generated Content to +// radically democratize both audio and video production. +//

    +//
    +//
    +//
    + +//
    +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +//
    +//
    + +//
    +// +//
    +// {/* Mobile Title */} +//

    +// +// Enabling Anyone to Create High Quality Movies and Music with AI +// +//

    +//

    +// We’re scientists, engineers, and creatives building the future AI +// cloud production studio. +//

    +//
    +//
    + +//
    +//
    +// +//

    +// FakeYou +// \ +// FakeYou +// \ +// FakeYou +// \ +// FakeYou +// \ +//

    +//     +//
    +//
    +//
    +//
    +// +// FakeYou +// +// FakeYou +//
    +//
    +// FakeYou +//
    + +//
    +//

    FakeYou

    +//

    +// Used by millions of people every month +//

    +//

    +// We've built a social platform for deep learning and generative +// models. FakeYou 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. +//

    +// +//
    +//
    +//
    +//
    +//
    +//
    +//
    +//
    +// +// FakeYou +// +// FakeYou +//
    +//
    +// FakeYou +//
    + +//
    +//

    PowerStream

    +//

    +// Twitch Streamers and Creators can engage and monetize +//

    +//

    +// 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. Get started with your channel! There's nothing +// to install. It's the easiest, most engaging, most fun system for +// Twitch yet. And it earns you money! +//

    +// +//
    +//
    +//
    +//
    +//
    +// +//

    +// Storyteller +// \ +// Storyteller +// \ +// Storyteller +// \ +// Storyteller +// \ +//

    +//     + +//
    +//

    +// Be Your Own Hollywood +//

    +//

    +// Storyteller's generative AI engine empowers anyone to be a film +// director or movie star. +//

    +//
    + +//
    +//
    +//
    +//
    +//

    +// +// Blended 3D upscaling and style transfer to achieve any look +// — real or animated +//

    +//
    +//
    +//

    +// +// Cooperative AI actors that can interact with humans and each +// other +//

    +//
    +//
    +//

    +// +// Motion and animation generation +//

    +//
    +//
    +//

    +// +// Graphical, procedural, and AI-assisted worldbuilding +//

    +//
    +//
    +//

    +// +// Script writing, narrative construction, and tonal editor +//

    +//
    +//
    +//

    +// +// Concept art and storyboard generation +//

    +//
    +//
    +//

    +// +// Automatic foley and soundtracks +//

    +//
    +//
    +//

    +// +// High level, fast, and intuitive production +//

    +//
    +//
    +//
    +//
    +//
    +//
    +//
    +//
    +//
    +// +//
    +//
    +//
    +//

    Volumetric Capture

    +//

    +// 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. +//

    +//
    +//
    +//
    + +//
    +//
    +// +//
    +//
    +//
    +//

    Motion Capture

    +//

    +// Community-contributed models, sets, and scenarios can be +// controlled with webcam, Kinect, or motion capture systems and +// directed remotely from the web. +//

    +//
    +//
    +//
    + +//
    +//
    +// +//
    +//
    +//
    +//

    +// Fake Faces, Voices, and Corrected Motion +//

    +//

    +// 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. +//

    +//
    +//
    +//
    +//
    +//
    +//
    +//
    +// {/* Storyteller HyperJail */} + +//
    +// +//
    + +//
    +// +//
    + +//
    +// +//
    + +//
    +//
    + +//
    +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +//
    + +//
    +//
    +//
    +//
    + +//
    +//
    +//
    + +//
    +//
    +//
    +//
    +//
    +// +//

    +// Music +// \ +// Music +// \ +// Music +// \ +// Music +// \ +// Music +// \ +// Music +// \ +//

    +//     + +//
    +//

    +// Top the Billboard Charts +//

    +//

    +// Our technology can turn anyone into a musician. +//

    +//
    + +//
    +//
    +//
    +//
    +//

    +// +// Generate AI Vocals from new or existing artists +//

    +//
    +//
    +//

    +// +// Swap and transform existing vocals into entirely new ones +//

    +//
    +//
    +//

    +// +// Generate lyrics, beat, and melody +//

    +//
    +//
    +//

    +// +// Take the stage with virtual artists powered by AI animation +//

    +//
    +//
    +//
    +//
    +//
    + +//
    +//
    +// +//

    +// Our Team +// \ +// Our Team +// \ +// Our Team +// \ +// Our Team +// \ +//

    +//     +//
    + +//
    +//
    +//
    +//
    +//

    +// We’re an interdisciplinary team building the one-person cloud +// studio +//

    +//
    +//
    +//
    +//
    +//

    +// Our mission is to empower anyone to create full feature-length +// content from home without institutional capital, large teams, +// huge amounts of time, or deep reservoirs of highly specialized +// talent. We give everyone their turn in the director’s seat and +// turn dreams into physical form. +//

    +//
    +//
    +//
    + +//
    +//

    The Team

    + +//
    +//
    +// +//
    +//
    +//

    +// Brandon Thomas +//

    +//

    Founder and CEO

    +// {/*
    */} +//

    +// Brandon worked 8 years as a distributed systems and AI/ML +// engineer at Square. He’s spent the last decade making indie +// films and being plugged into the Atlanta art scene. In college +// he built a laser projector and programmed it to play video games +// on the side of skyscrapers. Today he’s working on disrupting +// Hollywood and the music industry and transforming narrative +// storytelling into something the likes of which we’ve never seen +// before. +//

    +//
    +//
    + +//
    +//
    +// +//

    Ozzy

    +//

    Machine Learning Engineer

    +//
    +//
    +// +//

    Michael

    +//

    Machine Learning Engineer

    +//
    +//
    +// +//

    Ramiro

    +//

    Machine Learning Engineer

    +//
    +//
    +// +//

    Scott

    +//

    +// Chief Creative Officer / Technical 3D Artist +//

    +//
    +//
    +// +//

    Bombay

    +//

    UI / Frontend Engineer

    +//
    +//
    +// +//

    Paul

    +//

    Systems Engineer

    +//
    +//
    +// +//

    Jose

    +//

    Data Team

    +//
    +//
    +// +//

    Rodrigo

    +//

    Data Team

    +//
    +//
    + +// {/* NB(bt): Need to ask Alex if we can add this. +//

    Our Advisor

    + +//
    +// {/ *
    +// +//
    * /} +//
    +//

    +// Alex Wissner-Gross +//

    +//

    Advisor

    +// {/ *
    * /} +//

    +// Alex was the last person to graduate from MIT with a triple +// major, and he’s led a combined 1B of startup exits.{" "} +//
    +// We’re hoping we’re his first decacorn exit. +//

    +//
    +//
    +// */} +//
    +//
    +//
    +//
    +// +//

    +// Press & Mentions +// \ +// Press & Mentions +// \ +// Press & Mentions +// \ +// Press & Mentions +// \ +//

    +//     +//
    + +//
    +// +// +//
    +//
    +// Techstars Logo +//
    + +//

    +// "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." +//
    +//
    — Techstars +//

    +//
    +//     +// +//
    +//
    +// Gigazine Logo +//
    + +//

    +// "無料でビル・ゲイツやアーノルド・シュワルツネッガーなど有名人に好きな台詞をしゃべらせることができる「Vocodes」レビュー" +//
    +//
    +// ("Vocodes" [now FakeYou] allows users to use celebrities such +// as Bill Gates and Arnold Schwarzenegger to speak their +// favorite lines for free.) +//
    +//
    — Gigazine +//

    +//
    +//     +// +//
    +//
    +// Shots Logo +//
    + +//

    +// "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." +//
    +//
    — Shots +//

    +//
    +//     +// +//
    +//
    +// La Republica Logo +//
    + +//

    +// "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ú" +//
    +//
    +// (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" +//
    +//
    — La República +//

    +//
    +//     +// +//
    +//
    +// TNW Logo +//
    + +//

    +// We’ve previously seen apps like this, but Vocodes [now +// FakeYou] impresses with the sheer volume of voices available +// to test out. +//
    +//
    — TheNextWeb +//

    +//
    +//     +// +//
    +//

    +// "[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." +//
    +//
    — Input +//

    +//
    +//     +//     +//
    +//
    +//
    +//
    +//

    Contact Us

    +// +//
    + +//
    +//
    +// Storyteller Logo Icon +//
    +//
    +//
    +//
    +// ); +// } + +// export default IndexPage; diff --git a/packages/storyteller.io/src/pages/index/IndexPage.tsx b/packages/storyteller.io/src/pages/index/IndexPage.tsx index c1cd49a85c..45752e95b3 100644 --- a/packages/storyteller.io/src/pages/index/IndexPage.tsx +++ b/packages/storyteller.io/src/pages/index/IndexPage.tsx @@ -1,80 +1,33 @@ -import { - faDiscord, - faFacebook, - faTwitch, - faTwitter, -} from "@fortawesome/free-brands-svg-icons"; -import { - faBookOpen, - faClapperboard, - faCube, - faDrum, - faPaintbrush, - faPersonWalkingArrowRight, -} from "@fortawesome/free-solid-svg-icons"; -import { - faUserCowboy, - faPaintbrushPencil, - faMicrophoneStand, - faWaveformLines, - faMusic, - faUserMusic, -} from "@fortawesome/pro-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import React, { useState } from "react"; import Marquee from "react-fast-marquee"; -import Tippy from "@tippyjs/react"; import "tippy.js/dist/tippy.css"; -// import AudioSample from "./AudioSample"; import { useEffect, useRef } from "react"; import gsap from "gsap"; -import SplitType from "split-type"; -// import Scene from "./Scene"; -import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks"; import { Swiper, SwiperSlide } from "swiper/react"; import "swiper/css"; import "swiper/css/pagination"; -import { Autoplay, Pagination } from "swiper"; -import Tilt from "react-parallax-tilt"; +import { Autoplay, Pagination, FreeMode, Navigation, Thumbs } from "swiper"; +import "swiper/css/free-mode"; +import "swiper/css/navigation"; +import "swiper/css/thumbs"; function IndexPage() { // NB: React video bug: // https://stackoverflow.com/questions/61510160/why-muted-attribute-on-video-tag-is-ignored-in-react // https://stackoverflow.com/questions/61510160/why-muted-attribute-on-video-tag-is-ignored-in-react - const videoRef: any = useRef(null); + const videoRefMain: any = useRef(null); + const videoRefBG: any = useRef(null); // Title Animation useEffect(() => { - const splitTitle = new SplitType("#hero-title", { - types: "chars", - charClass: "title-split", - }); + const tl = gsap.timeline({ delay: 0.2 }); - const splitTitleOutline = new SplitType("#hero-title-outline", { - types: "words", - wordClass: "title-outline-split", - }); - - console.log(splitTitleOutline); - - var tl = gsap.timeline({ delay: 0.2 }); tl.to( - splitTitle.chars, + "#hero-title", { delay: 0, - duration: 0.4, - y: 0, - opacity: 1, - stagger: 0.03, - ease: "expo", - }, - "<" - ); - tl.to( - splitTitleOutline.words, - { - delay: 0, - duration: 0.5, - y: 0, + duration: 0.8, + x: 0, scale: 1, opacity: 1, ease: "expo", @@ -84,7 +37,7 @@ function IndexPage() { tl.to( "#sub-title", { - delay: 0.4, + delay: 0, duration: 0.8, x: 0, scale: 1, @@ -96,7 +49,7 @@ function IndexPage() { tl.to( "#hero-btn", { - delay: 0.2, + delay: 0, duration: 0.8, x: 0, scale: 1, @@ -108,17 +61,75 @@ function IndexPage() { }, []); useEffect(() => { - if (!!videoRef.current) { - videoRef.current.setAttribute("muted", "true"); - videoRef.current.setAttribute("autoplay", "true"); - videoRef.current.setAttribute("loop", "true"); - videoRef.current.setAttribute("playsinline", "true"); - videoRef.current.setAttribute("disablepictureinpicture", "true"); - videoRef.current.setAttribute("preload", "auto"); - videoRef.current.muted = true; - videoRef.current.play(); + if (!!videoRefBG.current) { + videoRefBG.current.setAttribute("muted", "true"); + videoRefBG.current.setAttribute("autoplay", "true"); + videoRefBG.current.setAttribute("loop", "true"); + videoRefBG.current.setAttribute("playsinline", "true"); + videoRefBG.current.setAttribute("disablepictureinpicture", "true"); + videoRefBG.current.setAttribute("preload", "auto"); + videoRefBG.current.muted = true; + videoRefBG.current.play(); } - }, [videoRef]); + }, [videoRefBG]); + + useEffect(() => { + if (!!videoRefMain.current) { + videoRefMain.current.setAttribute("muted", "true"); + videoRefMain.current.setAttribute("autoplay", "true"); + videoRefMain.current.setAttribute("loop", "true"); + videoRefMain.current.setAttribute("playsinline", "true"); + videoRefMain.current.setAttribute("disablepictureinpicture", "true"); + videoRefMain.current.setAttribute("preload", "auto"); + videoRefMain.current.muted = true; + videoRefMain.current.play(); + } + }, [videoRefMain]); + + const [thumbsSwiper, setThumbsSwiper] = useState(null); + + const teamMembers = [ + { + name: "Ozzy", + role: "Machine Learning Engineer", + imageSrc: "/images/team/ozzy.webp", + }, + { + name: "Michael", + role: "Machine Learning Engineer", + imageSrc: "/images/team/michael.webp", + }, + { + name: "Ramiro", + role: "Machine Learning Engineer", + imageSrc: "/images/team/ramiro.webp", + }, + { + name: "Scott", + role: "CCO / Technical 3D Artist", + imageSrc: "/images/team/scott.webp", + }, + { + name: "Bombay", + role: "UI / Frontend Engineer", + imageSrc: "/images/team/bombay.webp", + }, + { + name: "Paul", + role: "Systems Engineer", + imageSrc: "/images/team/paul.webp", + }, + { + name: "Jose", + role: "Data Team", + imageSrc: "/images/team/jose.webp", + }, + { + name: "Rodrigo", + role: "Data Team", + imageSrc: "/images/team/rodrigo.webp", + }, + ]; return (
    @@ -129,143 +140,127 @@ function IndexPage() { data-scroll-repeat="true" data-scroll-call="home" > - -
    -
    -
    - {/* Desktop Title */} -

    + + */} + +
    +
    +

    + + Enabling Anyone to Create High Quality Movies and Music with AI + +

    +

    + We are combining generative AI and User Generated Content to + radically democratize both audio and video production. +

    +

    - {/* Mobile Title */} -

    - - The Future of Storytelling - -

    -

    - We’re scientists, engineers, and creatives building the future - AI cloud production studio. -

    -
    - - Explore Storyteller - + Explore Storyteller + +
    +
    + +
    +
    +
    +
    - -
    - - - - - - - - - - - - - - - - - - - - -
    -
    + +

    - Social AI + Vision \ - Social AI + Vision \ - Social AI + Vision \ - Social AI + Vision + \ + Vision + \ + Vision + \ +

    +     +
    + +
    + +

    + We envision a future where a single creator can make content that + rivals modern Hollywood studios +

    +
    +
    +

    + Where more media is generated every day than all of human history. + In which the technical mastery behind creativity becomes so + accessible, that even a child could create a masterpiece. +

    +
    +
    +
    + +
    +
    + +

    + FakeYou + \ + FakeYou + \ + FakeYou + \ + FakeYou \

    -
    -
    - - FakeYou - +
    +
    FakeYou -
    -
    - FakeYou
    -

    FakeYou

    +

    Text to Speech

    - Used by millions of people every month + Our flagship, launched in April, 2022

    -

    - We've built a social platform for deep learning and generative - models. FakeYou 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. -

    +
      +
    • + Type in text, and get an audio recording of a selected voice +
      • +
    • + Over 3,000 user-generated voices of celebrities, characters + from film/television, and musicians +
      • +
    • + Users have created new episodes of their favorite cartoons, + taught classroom lessons on history, and made brand new music +
      • +
    -
    - - FakeYou - +
    FakeYou -
    -
    - FakeYou
    + + {/*
    +
    +
    +
    + FakeYou +
    + +
    +

    Video Lip Sync

    +

    + Launched in April 2022 +

    +
      +
    • + Upload an audio recording of speech, and an image and generate + animation of a character speaking +
      • +
    + +
    +
    +
    +
    */} +

    - Storyteller + Research \ - Storyteller + Research \ - Storyteller + Research \ - Storyteller + Research \

    -
    -

    - Be Your Own Hollywood -

    -

    - Storyteller's generative AI engine empowers anyone to be a film - director or movie star. +
    +

    Experiments

    +

    + As AI is still an emergent technology, our team finds itself + curiously exploring its capabilities.

    -
    + {/*
    @@ -427,115 +445,94 @@ function IndexPage() {
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -

    Volumetric Capture

    -

    - 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. -

    -
    -
    -
    +
    */} -
    -
    - -
    -
    -
    -

    Motion Capture

    -

    - Community-contributed models, sets, and scenarios can be - controlled with webcam, Kinect, or motion capture systems and - directed remotely from the web. -

    +
    +
    +
    +
    + setThumbsSwiper(swiper)} + loop={false} + direction="vertical" + slidesPerView={4} + spaceBetween={16} + freeMode={true} + watchSlidesProgress={true} + modules={[FreeMode, Navigation, Thumbs]} + allowTouchMove={false} + preventInteractionOnTransition={true} + className="research-swiper-thumb-container" + > + Facial Tracking + 3D Character Automated Lip-syncing + Motion Capture + GPT-Driven 24-hour News Cycle +
    -
    -
    - -
    -
    - -
    -
    -
    -

    - Fake Faces, Voices, and Corrected Motion -

    -

    - 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. -

    +
    + + +
    + +
    +     + +
    +
    + +
    +
    +     + +
    +
    + +
    +
    +     + +
    +
    + +
    +
    +     +
    -
    + + {/*
    - {/* Storyteller HyperJail */}
    -
    -
    - -

    - Music - \ - Music - \ - Music - \ - Music - \ - Music - \ - Music - \ -

    -     - -
    -

    - Top the Billboard Charts -

    -

    - Our technology can turn anyone into a musician. -

    -
    - -
    -
    -
    -
    -

    - - Generate AI Vocals from new or existing artists -

    -
    -
    -

    - - Swap and transform existing vocals into entirely new ones -

    -
    -
    -

    - - Generate lyrics, beat, and melody -

    -
    -
    -

    - - Take the stage with virtual artists powered by AI animation -

    -
    -
    -
    -
    -
    +
    */}
    @@ -748,7 +675,7 @@ function IndexPage() {
    -

    +

    Our mission is to empower anyone to create full feature-length content from home without institutional capital, large teams, huge amounts of time, or deep reservoirs of highly specialized @@ -759,111 +686,58 @@ function IndexPage() {

    -
    -

    The Team

    +
    +

    The Team

    -
    -
    - -
    -
    -

    - Brandon Thomas -

    -

    Founder and CEO

    - {/*
    */} -

    - Brandon worked 8 years as a distributed systems and AI/ML - engineer at Square. He’s spent the last decade making indie - films and being plugged into the Atlanta art scene. In college - he built a laser projector and programmed it to play video games - on the side of skyscrapers. Today he’s working on disrupting - Hollywood and the music industry and transforming narrative - storytelling into something the likes of which we’ve never seen - before. -

    +
    +
    +
    + +
    +
    +
    +

    + Brandon Thomas +

    +

    Founder and CEO

    +
    +

    + Brandon worked 8 years as a distributed systems and AI/ML + engineer at Square. He’s spent the last decade making indie + films and being plugged into the Atlanta art scene. In + college he built a laser projector and programmed it to play + video games on the side of skyscrapers. Today he’s working + on disrupting Hollywood and the music industry and + transforming narrative storytelling into something the likes + of which we’ve never seen before. +

    +
    +
    -
    -
    - -

    Ozzy

    -

    Machine Learning Engineer

    -
    -
    - -

    Michael

    -

    Machine Learning Engineer

    -
    -
    - -

    Ramiro

    -

    Machine Learning Engineer

    -
    -
    - -

    Scott

    -

    - Chief Creative Officer / Technical 3D Artist -

    -
    -
    - -

    Bombay

    -

    UI / Frontend Engineer

    -
    -
    - -

    Paul

    -

    Systems Engineer

    -
    -
    - -

    Jose

    -

    Data Team

    -
    -
    - -

    Rodrigo

    -

    Data Team

    -
    +
    + {teamMembers.map((member, index) => ( +
    +
    + +
    +

    + {member.name} +

    +

    {member.role}

    +
    +
    +
    + ))}
    {/* NB(bt): Need to ask Alex if we can add this.