mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-04 09:28:11 +00:00
animation and social links
This commit is contained in:
BFlat committed
1 parent
676afe52e4
commit
719b07eaeb
4 files changed
+142
-57
No files matched your search
@@ -313,7 +313,7 @@ p {
|
||||
border-radius: 12px;
|
||||
transform: translate3d(0px, 0px, 0px) rotate(45deg);
|
||||
z-index: 5;
|
||||
opacity: 0.6;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.shape-2 {
|
||||
@@ -326,7 +326,7 @@ p {
|
||||
top: -10%;
|
||||
right: 18%;
|
||||
z-index: 1;
|
||||
opacity: 0.6;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.shape-3-container {
|
||||
@@ -342,7 +342,7 @@ p {
|
||||
border-radius: 12px;
|
||||
transform: translate3d(0px, 0px, 0px) rotate(45deg);
|
||||
z-index: 5;
|
||||
opacity: 0.6;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.shape-4-container {
|
||||
@@ -358,7 +358,7 @@ p {
|
||||
border-radius: 10px;
|
||||
transform: translate3d(0px, 0px, 0px) rotate(45deg);
|
||||
z-index: 5;
|
||||
opacity: 0.6;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.zi-1 {
|
||||
@@ -982,6 +982,16 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
|
||||
--swiper-theme-color: #fa6b68 !important;
|
||||
}
|
||||
|
||||
#sub-title {
|
||||
opacity: 0;
|
||||
transform: translate(8rem, 0);
|
||||
}
|
||||
|
||||
#hero-img {
|
||||
opacity: 0;
|
||||
transform: translate(0, 200px);
|
||||
}
|
||||
|
||||
@media (max-width: 1199.98px) {
|
||||
.hero-img {
|
||||
min-width: 1550px;
|
||||
|
||||
@@ -17,16 +17,36 @@ function Footer(props: Props) {
|
||||
<div className="bg-dark-solid">
|
||||
<div className="container footer-top text-center">
|
||||
<div className="d-flex gap-4 justify-content-center p-4">
|
||||
<a href="https://google.com" className="footer-social-icon">
|
||||
<a
|
||||
href="https://discord.gg/fakeyou"
|
||||
className="footer-social-icon"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FontAwesomeIcon icon={faDiscord} />
|
||||
</a>
|
||||
<a href="https://google.com" className="footer-social-icon">
|
||||
<a
|
||||
href="https://twitch.tv/FakeYouLabs"
|
||||
className="footer-social-icon"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FontAwesomeIcon icon={faTwitch} />
|
||||
</a>
|
||||
<a href="https://google.com" className="footer-social-icon">
|
||||
<a
|
||||
href="https://facebook.com/vocodes"
|
||||
className="footer-social-icon"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FontAwesomeIcon icon={faFacebook} />
|
||||
</a>
|
||||
<a href="https://google.com" className="footer-social-icon">
|
||||
<a
|
||||
href="https://twitter.com/intent/follow?screen_name=FakeYouApp"
|
||||
className="footer-social-icon"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FontAwesomeIcon icon={faTwitter} />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -52,11 +52,9 @@ function TopNav(props: Props) {
|
||||
const menuToggle = () => {
|
||||
setMobileMenuOpen(!mobileMenuOpen);
|
||||
};
|
||||
|
||||
const hamburgerClassNames = mobileMenuOpen
|
||||
? "button_container active"
|
||||
: "button_container";
|
||||
|
||||
const menuClassNames = mobileMenuOpen ? "overlay open" : "overlay";
|
||||
|
||||
useEffect(() => {
|
||||
@@ -108,9 +106,7 @@ function TopNav(props: Props) {
|
||||
</ul>
|
||||
|
||||
<div className="col-md-3 text-end">
|
||||
<a className="btn btn-primary fs-6" href="#about" data-scroll-to>
|
||||
Contact
|
||||
</a>
|
||||
<button className="btn btn-primary fs-6">Contact</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -166,6 +162,7 @@ function TopNav(props: Props) {
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="#home" className={backToTop} data-scroll-to>
|
||||
<div className="btt-shape"></div>
|
||||
Back to Top
|
||||
|
||||
@@ -33,21 +33,13 @@ import "swiper/css/pagination";
|
||||
import { Autoplay, Pagination } from "swiper";
|
||||
|
||||
function IndexPage() {
|
||||
// Title Animation
|
||||
useEffect(() => {
|
||||
const splitTitle = new SplitType("#hero-title", {
|
||||
types: "chars",
|
||||
charClass: "title-split",
|
||||
});
|
||||
|
||||
gsap.to(splitTitle.chars, {
|
||||
delay: 0.2,
|
||||
duration: 0.4,
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
stagger: 0.03,
|
||||
ease: "expo",
|
||||
});
|
||||
|
||||
const splitTitleOutline = new SplitType("#hero-title-outline", {
|
||||
types: "words",
|
||||
wordClass: "title-outline-split",
|
||||
@@ -55,15 +47,60 @@ function IndexPage() {
|
||||
|
||||
console.log(splitTitleOutline);
|
||||
|
||||
gsap.to(splitTitleOutline.words, {
|
||||
delay: 0.25,
|
||||
duration: 0.8,
|
||||
var tl = gsap.timeline({ delay: 0.2 });
|
||||
tl.to(splitTitle.chars, {
|
||||
delay: 0.2,
|
||||
duration: 0.4,
|
||||
y: 0,
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
stagger: 0,
|
||||
stagger: 0.03,
|
||||
ease: "expo",
|
||||
});
|
||||
tl.to(
|
||||
splitTitleOutline.words,
|
||||
{
|
||||
delay: 0,
|
||||
duration: 0.8,
|
||||
y: 0,
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
ease: "expo",
|
||||
},
|
||||
"<"
|
||||
);
|
||||
tl.to(
|
||||
"#sub-title",
|
||||
{
|
||||
delay: 0.4,
|
||||
duration: 0.8,
|
||||
x: 0,
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
ease: "expo",
|
||||
},
|
||||
"<"
|
||||
);
|
||||
tl.to(
|
||||
"#hero-img",
|
||||
{
|
||||
duration: 1,
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
ease: "expo",
|
||||
},
|
||||
0.2
|
||||
);
|
||||
tl.to(
|
||||
".shape-2, .shape-1, .shape-3, .shape-4",
|
||||
{
|
||||
duration: 0.4,
|
||||
y: 0,
|
||||
scale: 1,
|
||||
opacity: 0.6,
|
||||
ease: "expo",
|
||||
},
|
||||
0.4
|
||||
);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
@@ -96,7 +133,10 @@ function IndexPage() {
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<div className="d-flex flex-column align-items-center align-items-xl-end">
|
||||
<div
|
||||
className="d-flex flex-column align-items-center align-items-xl-end"
|
||||
id="sub-title"
|
||||
>
|
||||
<p
|
||||
className="lead hero-sub-title fw-normal opacity-75"
|
||||
data-scroll
|
||||
@@ -108,6 +148,7 @@ function IndexPage() {
|
||||
AI cloud production studio.
|
||||
</p>
|
||||
<div
|
||||
id="hero-btn"
|
||||
data-scroll
|
||||
data-scroll-speed="-5"
|
||||
data-scroll-direction="horizontal"
|
||||
@@ -150,6 +191,7 @@ function IndexPage() {
|
||||
|
||||
<div className="d-flex justify-content-center">
|
||||
<img
|
||||
id="hero-img"
|
||||
className="hero-img"
|
||||
src="/hero/hero-img.webp"
|
||||
alt="Storyteller HyperJail"
|
||||
@@ -164,35 +206,43 @@ function IndexPage() {
|
||||
data-scroll-position="top"
|
||||
>
|
||||
<Tippy content="Discord" placement="right">
|
||||
<a href="https://discord.gg/fakeyou">
|
||||
<a
|
||||
href="https://discord.gg/fakeyou"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FontAwesomeIcon icon={faDiscord} />
|
||||
</a>
|
||||
</Tippy>
|
||||
<Tippy content="Twitch" placement="right">
|
||||
<a href="/">
|
||||
<a
|
||||
href="https://twitch.tv/FakeYouLabs"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FontAwesomeIcon icon={faTwitch} />
|
||||
</a>
|
||||
</Tippy>
|
||||
<Tippy content="Facebook" placement="right">
|
||||
<a href="/">
|
||||
<a
|
||||
href="https://facebook.com/vocodes"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FontAwesomeIcon icon={faFacebook} />
|
||||
</a>
|
||||
</Tippy>
|
||||
<Tippy content="Twitter" placement="right">
|
||||
<a href="/">
|
||||
<a
|
||||
href="https://twitter.com/intent/follow?screen_name=FakeYouApp"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FontAwesomeIcon icon={faTwitter} />
|
||||
</a>
|
||||
</Tippy>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
@@ -202,6 +252,15 @@ function IndexPage() {
|
||||
>
|
||||
<div className="shape-3"></div>
|
||||
</div>
|
||||
<div
|
||||
className="shape-1-container"
|
||||
data-scroll
|
||||
data-scroll-speed="4"
|
||||
data-scroll-position="top"
|
||||
>
|
||||
<div className="shape-1"></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="shape-4-container"
|
||||
data-scroll
|
||||
@@ -232,7 +291,7 @@ function IndexPage() {
|
||||
<h1 className="fw-bold display-4 about-title mt-5">
|
||||
You can run the new Hollywood and top the Billboard Hot 100
|
||||
</h1>
|
||||
<h4 className="fw-normal opacity-75 mt-3">
|
||||
<h4 className="fw-semibold opacity-75 mt-4">
|
||||
Our technology can turn anyone into a director, musician, or movie
|
||||
star.
|
||||
</h4>
|
||||
@@ -364,9 +423,9 @@ function IndexPage() {
|
||||
</div>
|
||||
<div className="col-lg-7 d-flex flex-column justify-content-center">
|
||||
<h1 className="fw-bold display-5">Voice Changing</h1>
|
||||
<h6 className="fw-semibold fs-5 opacity-75 mb-4">
|
||||
<h4 className="fw-semibold opacity-75 mb-4">
|
||||
Now you can sound like someone else
|
||||
</h6>
|
||||
</h4>
|
||||
<p className="mt-3">
|
||||
Use offline (studio quality) or real time voice changing to
|
||||
re-dub your film or give your live performers a new character.
|
||||
@@ -464,9 +523,9 @@ function IndexPage() {
|
||||
</div>
|
||||
<div className="col-lg-7 d-flex flex-column justify-content-center">
|
||||
<h1 className="fw-bold display-5">FakeYou</h1>
|
||||
<h6 className="fw-semibold fs-5 opacity-75 mb-4">
|
||||
<h4 className="fw-semibold opacity-75 mb-4">
|
||||
Used by millions of people every month
|
||||
</h6>
|
||||
</h4>
|
||||
<p className="mt-3">
|
||||
We've built a social platform for deep learning and generative
|
||||
models. FakeYou is a place where creators can upload and
|
||||
@@ -540,9 +599,9 @@ function IndexPage() {
|
||||
</div>
|
||||
<div className="col-lg-7 d-flex flex-column justify-content-center">
|
||||
<h1 className="fw-bold display-5">Storyteller Stream</h1>
|
||||
<h6 className="fw-semibold fs-5 opacity-75 mb-4">
|
||||
<h4 className="fw-semibold opacity-75 mb-4">
|
||||
Twitch Streamers and Creators can engage and monetize
|
||||
</h6>
|
||||
</h4>
|
||||
<p className="mt-3">
|
||||
It’s tough to build an audience on Twitch. It's even tougher
|
||||
to earn an income. We've built the most comprehensive and
|
||||
@@ -580,9 +639,9 @@ function IndexPage() {
|
||||
</div>
|
||||
<div className="col-lg-7 d-flex flex-column justify-content-center">
|
||||
<h1 className="fw-bold display-5">Storyteller Engine</h1>
|
||||
<h6 className="fw-semibold fs-5 opacity-75 mb-4">
|
||||
<h4 className="fw-semibold opacity-75 mb-4">
|
||||
A fully 3D virtual set for your stream or film
|
||||
</h6>
|
||||
</h4>
|
||||
<p className="mt-3">
|
||||
Our community contributes sets, character models, props,
|
||||
events, and more. Use motion or volumetric capture. Your
|
||||
@@ -713,10 +772,9 @@ function IndexPage() {
|
||||
</div>
|
||||
<div className="col-lg-7 d-flex flex-column justify-content-center">
|
||||
<h1 className="fw-bold display-5">Storyteller VoxelCam</h1>
|
||||
<h6 className="fw-semibold fs-5 opacity-75 mb-4">
|
||||
Volumetric capture for your stream, and soon for your film
|
||||
set.
|
||||
</h6>
|
||||
<h4 className="fw-semibold opacity-75 mb-4">
|
||||
Volumetric capture for your stream, and for your film set.
|
||||
</h4>
|
||||
<p className="mt-3">
|
||||
Webcams are boring and flat. You can use our volumetric camera
|
||||
in-stream to make your personality come to life. This system
|
||||
@@ -724,12 +782,12 @@ function IndexPage() {
|
||||
</p>
|
||||
<div>
|
||||
<a
|
||||
href="https://fakeyou.com"
|
||||
href="https://discord.gg/fakeyou"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
className="btn btn-primary mt-4"
|
||||
>
|
||||
<span>Visit Storyteller.stream</span>
|
||||
<span>Ask us in Discord</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -747,7 +805,7 @@ function IndexPage() {
|
||||
|
||||
<h2 className="text-center mt-5 pt-5 fw-bold">Screenshots</h2>
|
||||
|
||||
<div className="row gx-4 gy-4 my-5 text-center">
|
||||
<div className="row gx-4 gy-4 my-4 text-center">
|
||||
<div className="col-12 col-sm-4">
|
||||
<div>
|
||||
<img
|
||||
@@ -797,7 +855,7 @@ function IndexPage() {
|
||||
<Swiper
|
||||
loop={true}
|
||||
autoplay={{
|
||||
delay: 5000,
|
||||
delay: 6000,
|
||||
disableOnInteraction: false,
|
||||
}}
|
||||
slidesPerView={1.1}
|
||||
|
||||
Reference in new issue
Block a user