Files
artcraft/index.html
T

810 lines
31 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Storyteller">
<meta name="author" content="The Storyteller Company">
<title>Storyteller | advanced storytelling tools </title>
<!-- Mobile Specific Meta
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png" />
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<!-- CSS
================================================== -->
<!-- Themefisher Icon font -->
<link rel="stylesheet" href="plugins/themefisher-font/style.css">
<!-- bootstrap.min css -->
<link rel="stylesheet" href="plugins/bootstrap/dist/css/bootstrap.min.css">
<!-- Lightbox.min css -->
<link rel="stylesheet" href="plugins/lightbox2/dist/css/lightbox.min.css">
<!-- Slick Carousel -->
<link rel="stylesheet" href="plugins/slick-carousel/slick/slick.css">
<link rel="stylesheet" href="plugins/slick-carousel/slick/slick-theme.css">
<!-- Main Stylesheet -->
<link rel="stylesheet" href="css/style.css">
<!-- Colors -->
<!-- <link rel="stylesheet" type="text/css" href="css/colors/green.css" title="green">
<link rel="stylesheet" type="text/css" href="css/colors/red.css" title="light-red">
<link rel="stylesheet" type="text/css" href="css/colors/light-blue.css" title="light-blue">
<link rel="stylesheet" type="text/css" href="css/colors/yellow.css" title="yellow">
<link rel="stylesheet" type="text/css" href="css/colors/light-green.css" title="light-green">
<link rel="stylesheet" type="text/css" href="css/colors/blue.css" title="blue"> -->
</head>
<body id="body">
<!--
Start Preloader
==================================== -->
<div id="preloader">
<div class="preloader">
<div class="sk-circle1 sk-child"></div>
<div class="sk-circle2 sk-child"></div>
<div class="sk-circle3 sk-child"></div>
<div class="sk-circle4 sk-child"></div>
<div class="sk-circle5 sk-child"></div>
<div class="sk-circle6 sk-child"></div>
<div class="sk-circle7 sk-child"></div>
<div class="sk-circle8 sk-child"></div>
<div class="sk-circle9 sk-child"></div>
<div class="sk-circle10 sk-child"></div>
<div class="sk-circle11 sk-child"></div>
<div class="sk-circle12 sk-child"></div>
</div>
</div>
<!--
End Preloader
==================================== -->
<!--
Fixed Navigation
==================================== -->
<section class="header navigation">
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="index.html">
<img src="images/storyteller-logo.png" alt="logo" class="logo-image">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="tf-ion-android-menu"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">Streaming Tech</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#deepfake">Deepfakes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#community">Community</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#thesis">Vision</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</section>
<!--
Welcome Slider
==================================== -->
<section class="hero-area">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="video-player">
<img class="img-fluid rounded" src="images/screenshots/engine-fuji.png" alt="photogrammetric compositing">
<a class="play-icon" href="javascript:void(0)">
<i class="tf-ion-play" data-video="https://www.youtube.com/embed/a8AHuniA8tU?autoplay=1"></i>
</a>
</div>
</div>
<div class="col-md-6">
<div class="block">
<h2>The future doesn't need Hollywood.<br>It just needs you.</h2>
<p>The Storyteller Company develops tools for automating filmmaking and interactive streaming experiences. We leverage machine learning and
deepfake technology to change actors' appearances, motion capture to rig actors with prebuilt models, volumetric photogrammetry to composite
actors into scenes, and more. </p>
</div>
</div>
</div>
</div>
</section>
<!--
Start Section
==================================== -->
<section class="about-2 section bg-gray" id="about">
<div class="container">
<div class="row">
<div class="col-12 col-md-5">
<h2>Interactive Streaming</h2>
</div>
<div class="col-12 col-md-7">
<p>We're pioneers of interactive storytelling, and our tools can also be leveraged by audiences
in real time to change settings, spawn enemies, and create virtual on-screen cheering and heckling
from deepfaked cartoon characters, celebrities, and more. </p>
</div>
</div> <!-- End row -->
</div> <!-- End container -->
</section> <!-- End section -->
<section class="about section-sm" id="about-about">
<div class="container">
<div class="row mb-50 justify-content-center">
<div class="col-md-5 col-sm-12 text-center offset-md-1">
<img src="images/screenshots/engine-point-cloud.png" class="img-fluid rounded shadow" alt="engine sparse point cloud">
</div>
<div class="col-md-5 col-sm-12">
<div class="content">
<h2>Volumetric capture<br> means no camera work</h2>
<p>You can teleport yourself directly into the action with volumetric capture. Instead of needing a camera crew,
the world is compositied and moves around you!</p>
<p>We support a variety of off-the-shelf depth sensors, including Microsoft's Azure Kinect line and Intel RealSense.</p>
<p>We're planning on building support for a camera-only solution using cinema-quality lenses.</p>
</div>
</p>
</div>
</div> <!-- End row -->
<div class="row mt-50 justify-content-center">
<div class="col-12 col-md-5 offset-md-1 col-md-5 col-sm-12">
<div class="content">
<h2>Fully immersive<br>audience participation</h2>
<p>
Viewers can interact with streamers in real time and change the narrative flow. They can
voice themselves through <a href="https://www.twitch.tv/videos/970065071" target="_blank">text to speech</a>,
<a href="https://www.twitch.tv/videos/969978954" target="_blank">spawn enemies</a>,
change the setting, and more. This unlocks entirely new types of content for streamers: highly interactive improv theater, wildly fun games of
dungeons and dragons, and more. The viewers are in control.
</p>
<p>Streamers can even interact with <a href="https://www.twitch.tv/vocodes/clip/UnusualBloodyShingleRedCoat-atM49kxq7yW2Yrzt?filter=clips&range=7d&sort=time" target="_blank">games played within games</a>.</p>
</div>
</p>
</div>
<div class="col-12 col-md-5 col-sm-12 text-center">
<img src="images/screenshots/engine-zelda-monsters.png" class="img-fluid rounded shadow" alt="engine with spawned monsters">
</div>
</div> <!-- End row -->
<div class="row mb-50 justify-content-center">
<div class="col-md-5 col-sm-12 text-center offset-md-1">
<img src="images/screenshots/rigged-trex.png" class="img-fluid rounded shadow" alt="mocap with rigged models">
</div>
<div class="col-md-5 col-sm-12">
<div class="content">
<h2>Industrial motion capture<br> for next-gen VTubing</h2>
<p>Wire up rigged models to motion capture sensors to inhabit a new body.
We support wearables and computer vision-based solutions.
</p>
<p>
You can even pull off-the-shelf models from Models Resource and other popular websites.
</p>
<p>
We offer lots of flexibility for Virtual YouTubers and Streamers.
</p>
</div>
</p>
</div>
</div> <!-- End row -->
</div> <!-- End container -->
</section> <!-- End section -->
<!--
Start Section
==================================== -->
<section class="about-2 section bg-gray" id="deepfake">
<div class="container">
<div class="row">
<div class="col-12 col-md-5">
<h2>The Power of Community</h2>
</div>
<div class="col-12 col-md-7">
<p>Our users can create compelling content easily with the power of deep fakes.
This can be done in our engine or on our website. Users can download content to create media for sharing
and remixing.</p>
</div>
</div> <!-- End row -->
</div> <!-- End container -->
</section> <!-- End section -->
<!--
Start About Section
==================================== -->
<section class="about-mission-vision section">
<div class="container">
<div class="row">
<div class="col">
<div class="title">
<h4>Fostering Growth With</h4>
<h2>Community Generated Content</h2>
<span class="border"></span>
<p><a href="https://vo.codes" target="_blank">Vo.codes</a> is our deep fake platform with a
friendly web interface. It lets users create novel audio and video content and easily remix
it for distribution on social media.</p>
<br>
<p>Vo.codes is also integrated into our streaming engine as a compelling community
engagement feature.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="commonTab">
<ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="audio-tab" data-toggle="tab" href="#deepfake-audio" role="tab" aria-controls="deepfake-audio" aria-selected="true">Audio Deepfakes</a>
</li>
<li class="nav-item">
<a class="nav-link" id="video-tab" data-toggle="tab" href="#deepfake-video" role="tab" aria-controls="deepfake-video" aria-selected="false">Video Deepfakes</a>
</li>
<li class="nav-item">
<a class="nav-link" id="flywheel-tab" data-toggle="tab" href="#deepfake-flywheel" role="tab" aria-controls="deepfake-flywheel" aria-selected="false">Annotation Flywheel</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="deepfake-audio" role="tabpanel" aria-labelledby="audio-tab">
<div class="row">
<div class="col-md-6 align-self-center">
<h2>Audio Deepfake Technology</h2>
<p>Our "vo.codes" text to speech engine combines several of the latest machine learning architectures to generate
audio from well-known characters and celebrities.</p>
<p>We also have a voice conversion system that changes a speaker's voice to a target speaker (pending release).
Collectively these tools allow our community to create compelling new audio content that has proven wildly popular.</p>
</div>
<div class="col-md-6">
<img class="img-fluid rounded shadow " src="images/screenshots/vocodes-audio.png" alt="vocodes audio">
</div>
</div>
</div>
<div class="tab-pane fade" id="deepfake-video" role="tabpanel" aria-labelledby="video-tab">
<div class="row">
<div class="col-md-6 align-self-center">
<h2>Video Deepfakes</h2>
<p>Our users can also create deepfake videos using a few of the most popular algorithms:
Wav2Lip and first-order-model.</p>
<p>Vo.codes makes it easy for users to create funny and engaging content. It's especially
useful for folks that don't have beefy GPUs or that lack the expertise to deal with code.</p>
</div>
<div class="col-md-6">
<img class="img-fluid rounded shadow mt-20" src="images/screenshots/vocodes-video.png" alt="vocodes video">
</div>
</div>
</div>
<div class="tab-pane fade" id="deepfake-flywheel" role="tabpanel" aria-labelledby="flywheel-tab">
<div class="row">
<div class="col-md-6 align-self-center">
<h2>Annotation Flywheel</h2>
<p>The community that creates with us is also heavily involved in data curation and annotation
for our ML models. To that end, we have a variety of tools that make gathering data and labeling
it easy.</p>
<p>Users have stepped up and taken an active role in building data sets that extend our
capabilities and reach.</p>
<p>As we build more features that directly involve measurement &mdash; mocap-based posture estimation,
camera movement, timeline editing, etc. &mdash; we'll collect data that will help us train models
to automate even more creative tasks.
</p>
</div>
<div class="col-md-6">
<img class="img-fluid rounded shadow mt-20" src="images/screenshots/vocodes-tooling.png" alt="vocodes tooling">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Start Testimonial
=========================================== -->
<section class="testimonial section" id="testimonial">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- testimonial wrapper -->
<div class="testimonial-slider">
<!-- testimonial single -->
<div class="item text-center">
<i class="tf-ion-quote"></i>
<!-- client info -->
<div class="client-details">
<p>Tool of the Week: AI voice generator | Vo.codes [...] project from Brandon Thomas 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>
</div>
<!-- /client info -->
<!-- client photo -->
<div class="client-thumb">
<a href="https://artificial-intelligence.startupdigest.com/issues/microsoft-and-tiktok-facial-recognition-at-stadiums-ai-voice-generator-267682"
taret="_blank"><img src="images/news/techstars_logo.png" class="img-fluid" alt="techstars"></a>
</div>
<div class="client-meta">
<h4>techstars_</h4>
<span>Startup Digest</span>
</div>
<!-- /client photo -->
</div>
<!-- /testimonial single -->
<!-- testimonial single -->
<div class="item text-center">
<i class="tf-ion-quote"></i>
<!-- client info -->
<div class="client-details">
<p>無料でビル・ゲイツやアーノルド・シュワルツネッガーなど有名人に好きな台詞をしゃべらせることができる「Vocodes」レビュー</p>
<p>("Vocodes" allows users to use celebrities such as Bill Gates and Arnold Schwarzenegger to speak their favorite lines for free.)</p>
</div>
<!-- /client info -->
<!-- client photo -->
<div class="client-thumb">
<a href="https://gigazine.net/news/20200728-vocodes/" target="_blank"><img src="images/news/gigazine_g.jpg" class="img-fluid" alt="gigazine"></a>
</div>
<div class="client-meta">
<h4>Gigazine</h4>
<span>Popular and influential Japanese blog</span>
</div>
<!-- /client photo -->
</div>
<!-- /testimonial single -->
<!-- testimonial single -->
<div class="item text-center">
<i class="tf-ion-quote"></i>
<!-- client info -->
<div class="client-details">
<p>It’s simply a piece of AI software called Vocodes. The tool, which I can best describe as a deepfake generator,
can mimic the voices of a slew of politicians and celebrities including Donald Trump, Barack Obama, Bryan Cranston,
Danny Devito, and a dozen more.</p>
</div>
<!-- /client info -->
<!-- client photo -->
<div class="client-thumb">
<a href="https://thenextweb.com" target="_blank"><img src="images/news/tnw.png" class="img-fluid" alt="TNW"></a>
</div>
<div class="client-meta">
<h4>The Next Web</h4>
</div>
<!-- /client photo -->
</div>
<!-- /testimonial single -->
<!-- testimonial single -->
<div class="item text-center">
<i class="tf-ion-quote"></i>
<!-- client info -->
<div class="client-details">
<p>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>
</div>
<!-- /client info -->
<!-- client photo -->
<div class="client-thumb">
<a href="https://www.shots.net/news/view/weekly-rewind-july-31st-2020" target="_blank"><img src="images/news/shots.png" class="img-fluid" alt="shots.net"></a>
</div>
<div class="client-meta">
<h4>Shots</h4>
</div>
<!-- /client photo -->
</div>
<!-- /testimonial single -->
</div>
</div> <!-- end col lg 12 -->
</div> <!-- End row -->
</div> <!-- End container -->
</section> <!-- End Section -->
<!-- Start Portfolio Section
=========================================== -->
<section class="portfolio section" id="community">
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="title text-center">
<h4>What our users have created</h4>
<h2>COMMUNITY SHOWCASE</h2>
<span class="border"></span>
<p>These are recent videos created using the <a href="https://vo.codes" target="_blank">"vo.codes"</a>
deepfake toolset, which is both a standalone website featuring deepfake tools,
and a stream-integrated audience interaction platform.</p>
<br>
<p>Our community's videos collectively have tens of millions of views.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<!-- /section title -->
<div class="portfolio-filter">
<button type="button" data-filter="all">All</button>
<button type="button" data-filter=".music">Music Videos</button>
<button type="button" data-filter=".youtube">YouTuber</button>
<button type="button" data-filter=".memes">Memes</button>
</div>
</div>
</div> <!-- /end col-lg-12 -->
<div class="row portfolio-items-wrapper">
<div class="col-6 col-md-4 padding-0 mix music">
<div class="portfolio-block">
<img class="img-fluid" src="images/community/spongebob_100gecs.jpg" alt="">
<div class="caption">
<a class="search-icon" href="images/community/spongebob_100gecs.jpg" data-lightbox="image-1">
<i class="tf-ion-ios-search-strong"></i>
</a>
<h4><a href="https://www.youtube.com/watch?v=iBpqJF5LXX4" target="_blank">SpongeBob sings Money Machine by 100 gecs, by Frog101</a></h4>
</div>
</div>
</div>
<div class="col-6 col-md-4 padding-0 mix music">
<div class="portfolio-block">
<img class="img-fluid" src="images/community/dr-phil-wap.png" alt="">
<div class="caption">
<a class="search-icon" href="images/community/dr-phil-wap.png" data-lightbox="image-1">
<i class="tf-ion-ios-search-strong"></i>
</a>
<h4><a href="https://www.youtube.com/watch?v=_CoWEFTNBWw" target="_blank">WAP but its Dr.Phil, by Burrito Glasses</a></h4>
</div>
</div>
</div>
<div class="col-6 col-md-4 padding-0 mix music">
<div class="portfolio-block">
<img class="img-fluid" src="images/community/spongebob-locked-up.png" alt="">
<div class="caption">
<a class="search-icon" href="images/community/spongebob-locked-up.png" data-lightbox="image-1">
<i class="tf-ion-ios-search-strong"></i>
</a>
<h4><a href="https://www.youtube.com/watch?v=IKs5iWVRE94" target="_blank">Spongebob Sings "LOCKED UP Pt. 2" by 6IX9INE (Feat. Akon), by Yahia</a></h4>
</div>
</div>
</div>
<div class="col-6 col-md-4 padding-0 mix memes">
<div class="portfolio-block">
<img class="img-fluid" src="images/community/gilbert.png" alt="">
<div class="caption">
<a class="search-icon" href="images/community/gilbert.png" data-lightbox="image-1">
<i class="tf-ion-ios-search-strong"></i>
</a>
<h4><a href="https://www.youtube.com/watch?v=ZHn1rbagpaM" target="_blank">Gilbert Gottfried on Sonic the Hedgehog (2020) - Movie Rant by Cletraflexity</a></h4>
</div>
</div>
</div>
<div class="col-6 col-md-4 padding-0 mix memes">
<div class="portfolio-block ">
<img class="img-fluid" src="images/community/vocodes-sonic-memes.png" alt="">
<div class="caption">
<a class="search-icon" href="images/community/vocodes-sonic-memes.png" data-lightbox="image-1">
<i class="tf-ion-ios-search-strong"></i>
</a>
<h4><a href="https://www.youtube.com/watch?v=7-7S9pTIiVM" target="_blank">Vo.codes Sonic memes are popular on YouTube (1M+ views per video)</a></h4>
</div>
</div>
</div>
<div class="col-6 col-md-4 padding-0 mix youtube">
<div class="portfolio-block">
<img class="img-fluid" src="images/community/ai-youtuber.png" alt="">
<div class="caption">
<a class="search-icon" href="images/community/ai-youtuber.png" data-lightbox="image-1">
<i class="tf-ion-ios-search-strong"></i>
</a>
<h4><a href="https://www.youtube.com/watch?v=O3062mEBwnA" target="_blank">AI YouTuber explains Vo.codes</a></h4>
</div>
</div>
</div>
</div>
</div> <!-- end row -->
</section> <!-- End section -->
<!--
Start About Section
==================================== -->
<section class="service-2 section bg-gray" id="thesis">
<div class="container">
<div class="row">
<div class="col">
<div class="title text-center">
<h4>Our Thesis</h4>
<h2>Anyone can be a Scorsese</h2>
<span class="border"></span>
<p>
In Hollywood, it used to be that there was only so much room at the top, and not enough budget to
go around. Not every starry-eyed creative could become a Steven Spielberg or a Patty Jenkins.
</p>
<br>
<p>
Tomorrow's content creation is faster, easier, and cheaper. Because of that, it will undoutably be
much more accessible. It will look less like filming on a Hollywood back lot or editing in
Adobe Premiere and more like ML auto assist with knobs, sliders, and high level control
planes. Despite the simplicity, users will still have control when they want it, and the results
will have the look and feel of a well-polished Scorsese film.
</p>
<br>
<p>With advancements in ML, computer vision, spatial computing, and semantic understanding,
you'll have to go out of your way to make a bad film or live stream.
</p>
<br>
</p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="title text-center">
<h4>How We'll Get There</h4>
<h2>Roadmap</h2>
<span class="border"></span>
<p>We have a plan to lay the cornerstones for our angle of attack.</p>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-4 col-sm-6 p-0">
<div class="service-item text-center">
<span class="count">1.</span>
<i class="tf-ion-ios-briefcase-outline"></i>
<h4>Audience of Creators</h4>
<p>
We're cultivating a community of creators: streamers, YouTubers, and game designers.
They will use our tools and guide their evolution.
</p>
</div>
</div>
<div class="col-md-4 col-sm-6 p-0">
<div class="service-item text-center">
<span class="count">2.</span>
<i class="tf-ion-ios-alarm-outline"></i>
<h4>Engaged Worldbuilding</h4>
<p>Users can contribute data to build shared models, insert themselves into each others' streams,
and remix content to create new memes or narratives.</p>
</div>
</div>
<div class="w-100"></div>
<div class="col-md-4 col-sm-6 p-0">
<div class="service-item text-center">
<span class="count">3.</span>
<i class="tf-ion-ios-email-outline"></i>
<h4>Automate Away</h4>
<p>We're taking the cost and difficulty out of camera work, video editing,
and more. Our tools will better enable creatives by leveraging
automation. A virtual camera requires no camera crew.</p>
</div>
</div>
<div class="col-md-4 col-sm-6 p-0">
<div class="service-item text-center">
<span class="count">4.</span>
<i class="tf-ion-ios-locked-outline"></i>
<h4>Acceleration Engine</h4>
<p>Over time, our models will learn what makes for compelling plot and pacing
and will offer assistance on narrative structure, shot composition,
and timeline construction.</p>
</div>
</div>
</div> <!-- End row -->
</div> <!-- End container -->
</section> <!-- End section -->
<!--
Start Section
==================================== -->
<section class="about-2 section bg-gray" id="automation">
<div class="container">
<div class="row">
<div class="col-12 col-md-5">
<h2>Automation of storytelling</h2>
</div>
<div class="col-12 col-md-7">
<p>
Hollywood and traditional media are quadratic in cost, time, and complexity.
The next wave of technology includes fixes for dozens of these inefficiencies, and transforms
human labor back into human creativity. Imagine if <em>you</em> could make a film in a weekend.
</p>
</div>
</div> <!-- End row -->
</div> <!-- End container -->
</section> <!-- End section -->
<!-- Start Our Team
=========================================== -->
<section class="team section bg-gray" id="team">
<div class="container">
<div class="row">
<div class="col">
<div class="title text-center">
<h4>We're Hiring</h4>
<h2>Our Team.</h2>
<span class="border"></span>
<p>
We go beyond traditional "full stack". Computer Vision, Machine Learning, Game Engine programming,
as well as traditional backend and frontend roles. We're at the forefront of where "spatial computing"
meets automation and entertainment.
</p>
</div>
</div>
</div>
<div class="row">
<!-- team member -->
<div class="col-12 col-md-3 col-sm-6" >
<div class="team-member text-center">
<div class="member-photo">
<!-- member photo -->
<img class="img-fluid" src="images/team/brandon-film-arrow.png" alt="Brandon Thomas">
<!-- /member photo -->
</div>
<!-- member name & designation -->
<div class="member-content">
<h3>Brandon Thomas</h3>
<span>Founder</span>
<p>
Eight years tech industry engineering experience, hobbyist actor and filmmaker.
</p>
<ul class="list-inline">
<li class="list-inline-item"><a href="https://twitter.com/echelon"><i class="tf-ion-social-twitter"></i></a></li>
<li class="list-inline-item"><a href="http://brand.io"><i class="tf-ion-social-dribbble"></i></a></li>
<li class="list-inline-item"><a href="https://www.youtube.com/channel/UCJkiCgC1aeUSPKydLgmKQlQ/videos"><i class="tf-ion-social-youtube"></i></a></li>
</ul>
</div>
<!-- /member name & designation -->
</div>
</div>
<!-- end team member -->
</div> <!-- End row -->
</div> <!-- End container -->
</section> <!-- End section -->
<!--
Start Call To Action
==================================== -->
<section class="call-to-action section">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2>Storytelling Democratized</h2>
<p>Anyone can create highly polished content. Most have simply never been afforded the opportunity.</p>
</div>
</div> <!-- End row -->
</div> <!-- End container -->
</section> <!-- End section -->
<footer id="footer" class="bg-one">
<div class="top-footer">
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3">
<h3>Streaming</h3>
<p>Storyteller stream engine is still in a closed alpha, but is demoed weekly
on our <a href="https://www.twitch.tv/vocodes">Twitch.tv channel</a>.</p>
</div>
<!-- End of .col-sm-3 -->
<div class="col-sm-3 col-md-3 col-lg-3">
<h3>Deepfakes</h3>
<p>Vo.codes deepfake technology is usable while watching our Twitch stream
as well as on the website <a href="https://vo.codes">vo.codes</a>.</p>
</div>
<!-- End of .col-sm-3 -->
<!-- End of .col-sm-3 -->
<div class="col-sm-3 col-md-3 col-lg-3">
<h3>Contact us</h3>
<p>brandon@storyteller.company</p>
<p>We're hiring!</p>
</div>
<!-- End of .col-sm-3 -->
<div class="col-sm-3 col-md-3 col-lg-3">
<h3>Follow Us</h3>
<ul>
<li><a href="https://twitter.com/vocodes" target="_blank">Twitter</a></li>
<li><a href="https://twitch.tv/vocodes" target="_blank">Twitch</a></li>
<li><a href="https://www.youtube.com/channel/UC2t-iks7t2M8A2j6tQnRaYw" target="_blank">YouTube</a></li>
</ul>
</div>
</div>
</div> <!-- end container -->
</div>
<div class="footer-bottom">
<h5>Copyright 2021. The Storyteller Company<br>(formally registered as Learning Machines, LLC.)</h5>
</div>
</footer> <!-- end footer -->
<!-- end Footer Area
========================================== -->
<!--
Essential Scripts
=====================================-->
<!-- Main jQuery -->
<script src="plugins/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.7 -->
<script src="plugins/bootstrap/dist/js/popper.min.js"></script>
<script src="plugins/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Parallax -->
<script src="plugins/parallax/jquery.parallax-1.1.3.js"></script>
<!-- lightbox -->
<script src="plugins/lightbox2/dist/js/lightbox.min.js"></script>
<!-- Owl Carousel -->
<script src="plugins/slick-carousel/slick/slick.min.js"></script>
<!-- Portfolio Filtering -->
<script src="plugins/mixitup/dist/mixitup.min.js"></script>
<!-- Smooth Scroll js -->
<script src="plugins/smooth-scroll/dist/js/smooth-scroll.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCC72vZw-6tGqFyRhhg5CkF2fqfILn2Tsw"></script>
<!-- Custom js -->
<script src="js/script.js"></script>
</body>
</html>