Amane/endpild-laman
1
0
Fork 0
mirror of https://gitlab.com/serenetia/endpild-laman.git synced 2025-03-15 13:55:54 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
AmaneSerenetia 2024-01-22 20:52:38 +09:00
commit 1104b76e46
113 changed files with 15998 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
.editorconfig Normal file
View File

@ -0,0 +1,14 @@
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
insert_final_newline = true
trim_trailing_whitespace = true
end_of_line = lf
[*.md]
max_line_length = off
trim_trailing_whitespace = false

7
.eslintrc.json Normal file
View File

@ -0,0 +1,7 @@
{
"extends": "next/core-web-vitals",
"rules": {
"semi": ["error", "always"],
"react-hooks/exhaustive-deps": "off"
}
}

38
.gitignore vendored Normal file
View File

@ -0,0 +1,38 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
# analysis
/.scannerwork

5
.idea/.gitignore generated vendored Normal file
View File

@ -0,0 +1,5 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/

13
.idea/codeStyles/Project.xml generated Normal file
View File

@ -0,0 +1,13 @@
<component name="ProjectCodeStyleConfiguration">
<code_scheme name="Project" version="173">
<JSCodeStyleSettings version="0">
<option name="FORCE_SEMICOLON_STYLE" value="true" />
<option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
<option name="SPACES_WITHIN_IMPORTS" value="true" />
</JSCodeStyleSettings>
<TypeScriptCodeStyleSettings version="0">
<option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
<option name="SPACES_WITHIN_IMPORTS" value="true" />
</TypeScriptCodeStyleSettings>
</code_scheme>
</component>

5
.idea/codeStyles/codeStyleConfig.xml generated Normal file
View File

@ -0,0 +1,5 @@
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="USE_PER_PROJECT_SETTINGS" value="true" />
</state>
</component>

7
.idea/discord.xml generated Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="DiscordProjectSettings">
<option name="show" value="PROJECT_FILES" />
<option name="description" value="" />
</component>
</project>

12
.idea/endfield.iml generated Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

19
.idea/inspectionProfiles/Project_Default.xml generated Normal file
View File

@ -0,0 +1,19 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
<inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
<option name="myValues">
<value>
<list size="1">
<item index="0" class="java.lang.String" itemvalue="inverse" />
</list>
</value>
</option>
<option name="myCustomValuesEnabled" value="true" />
</inspection_tool>
<inspection_tool class="RequiredAttributes" enabled="true" level="WARNING" enabled_by_default="true">
<option name="myAdditionalRequiredHtmlAttributes" value="imageURL" />
</inspection_tool>
</profile>
</component>

8
.idea/modules.xml generated Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/endfield.iml" filepath="$PROJECT_DIR$/.idea/endfield.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml generated Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

4
.idea/watcherTasks.xml generated Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
</project>

1
README.md Normal file
View File

@ -0,0 +1 @@
website endfield yang dulu keliatan keren, karena gw gabut dan gw penasaran jadi nya iseng iseng

80
components/anchor.tsx Normal file
View File

@ -0,0 +1,80 @@
import { motion, MotionProps } from "framer-motion";
import { FC, ReactNode, useEffect, useState } from "react";
import { Forceful } from "@utils/anims";
interface AnchorProps {
to: string;
blankTarget?: boolean;
children?: ReactNode;
}
export const Anchor: FC<AnchorProps> = ({
children,
to,
blankTarget = true,
}) => {
const [isHovered, setIsHovered] = useState(false);
const [isSSR, setIsSSR] = useState(true);
useEffect(() => {
setIsSSR(false);
}, []);
return <motion.a
onHoverStart={() => setIsHovered(true)}
onHoverEnd={() => setIsHovered(false)}
initial={{
textDecoration: "underline dotted",
textUnderlineOffset: "1em",
y: 20,
opacity: 0,
}}
animate={{
color: "hsl(231, 0%, 90%)",
textDecoration: "underline dotted",
textUnderlineOffset: isHovered ? "-1.1em" : "0.1em",
textDecorationColor: "hsl(231, 0%, 65%)",
y: 0,
opacity: 1,
}}
exit={{
y: -20,
opacity: 0,
}}
transition={{
textUnderlineOffset: {
duration: 0.3,
delay: isHovered ? 0 : 0.2,
ease: Forceful,
},
duration: 0.3,
ease: Forceful,
y: {
duration: 0.5,
ease: Forceful,
},
opacity: {
duration: 0.5,
ease: Forceful,
}
}}
className={"rel cur-pointer"}
href={to}
target={blankTarget ? "_blank" : "_self"}
rel={blankTarget ? "noopener noreferrer" : ""}
>
{!isSSR && <motion.span
className={"abs fw fh"}
initial={{
backgroundImage: "linear-gradient(transparent 100%, hsl(213, 0%, 70%) 0%)",
}}
animate={{
backgroundImage: isHovered ? "linear-gradient(transparent 0%, #fff 0%)" : "linear-gradient(transparent 100%, #fff 0%)",
mixBlendMode: "difference",
}}
transition={{
duration: 0.5,
ease: Forceful,
}}
/>}
{children}
</motion.a>;
};

245
components/body.tsx Normal file
View File

@ -0,0 +1,245 @@
import Image from 'next/image';
import { Box } from "@chakra-ui/react";
import { useAtom } from "jotai";
import { Language, ImageData, LanguagePack, IsPortrait } from "@states/global";
import { FC, useEffect, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import bodyStyles from './body/Body.module.scss';
import { Logger } from "@utils/logger";
import { Forceful, SpeedUp } from "@utils/anims";
import { joinClasses, useLocale } from "@utils/common";
import { LeftPanel } from "@components/body/left-panel";
import { RightPanel } from "@components/body/right-panel";
import { MotionBox } from "@components/motion";
import { ImageGallery, ImageGalleryInit, InImageFullScreenMode } from "@components/images";
export const Body = () => {
// const [imageData] = useAtom(ImageData);
const [inImageFullScreenMode] = useAtom(InImageFullScreenMode);
const locale = useLocale(useAtom(Language)[0], useAtom(LanguagePack)[0]);
const [, setGalleryInit] = useAtom(ImageGalleryInit);
const [currentPage, setCurrentPage] = useState(1);
const changePage = (to: number) => {
if (to === currentPage) return;
if (to !== 3)
setGalleryInit(false);
setCurrentPage(to);
};
const [isPortrait, setIsPortrait] = useAtom(IsPortrait);
const listener = () => {
const newPortraitState = window.innerHeight / window.innerWidth < 1165 / 967;
if (isPortrait !== newPortraitState)
setIsPortrait(newPortraitState);
};
useEffect(() => {
listener();
window.addEventListener('resize', listener);
return () => {
window.removeEventListener('resize', listener);
};
}, [isPortrait]);
return (<MotionBox
h={
inImageFullScreenMode ?
"calc(100vh - 0px)" :
"calc(100vh - 176px)"
}
w="100vw"
p={0}
transition={{ duration: 0.7, ease: Forceful }}
className={joinClasses(bodyStyles["content"], "rel grid overflow-hidden")}
layout
>
<DesktopPanel
LPanelOnIndexAnimStart={(from, to) => changePage(to)}
LPanelIndexChange={(newPageIndex) => {
setCurrentPage(newPageIndex);
}}
RPanelCurrentIndex={currentPage}
InitialIndex={currentPage}
/>
<AnimatePresence>
{currentPage === 1 && <>
<SectionTitle text={locale("content.main.1.title")}/>
<InfoDialogue/>
</>}
</AnimatePresence>
<AnimatePresence>
{currentPage === 2 && <>
<SectionTitle text={"RFPD"}/>
</>}
</AnimatePresence>
{/*<ImageGallery initialImageURL={imageData.get("assets/img/bg.jpg")!} present={currentPage === 3}/>*/}
<ImageGallery currentPage={currentPage}/>
</MotionBox>);
};
const DescriptionToggleBtn: FC<{ onClick: (active: boolean) => void, initial: boolean }> = ({ onClick, initial }) => {
const [isOpen, setIsOpen] = useState(initial);
const HandleClick = () => {
setIsOpen(!isOpen);
onClick(!isOpen);
};
return (
<motion.button
animate={{
backgroundColor: "#D9D9D9",
boxShadow: "#000 0px 0px 20px 0px",
}}
className={"fw z1 abs b0 l0"}
onClick={HandleClick}
layout={"size"}
>
<MotionBox
as={"p"}
w={"100%"}
fontFamily={"Oswald"}
fontWeight={"bold"}
color={"#000"}
textAlign={"left"}
p={"0.8ch"}
pl={"2ch"}
layout={"position"}
>
{isOpen ? "LESS" : "MORE"}
</MotionBox>
</motion.button>
);
};
const SectionTitle = ({ text }: { text: string }) => {
const [isExiting, setIsExiting] = useState(false);
useEffect(() => () => setIsExiting(true) , []);
const transition = {
x: {
duration: isExiting ? 1.55 : 1.7,
ease: isExiting ? SpeedUp : Forceful,
},
opacity: {
duration: 0.5,
ease: Forceful,
}
};
return (
<MotionBox
m={"auto 0 13.5rem auto"}
initial={{
// mixBlendMode: "exclusion",
x: "70vw",
}}
animate={{ x: "0" }}
exit={{
x: "-80vw",
opacity: 0,
}}
transition={transition}
className={joinClasses(bodyStyles["desc-1-title"], "z1 no-pointer")}
>
<Box
as={"p"}
fontFamily={"Oswald"}
fontWeight={"bold"}
fontSize={"100"}
color={"#fff"}
textAlign={"left"}
p={"0.8ch"}
pl={"2ch"}
mixBlendMode={"exclusion"}
whiteSpace={"nowrap"}
>
{text}
</Box>
</MotionBox>
);
};
const InfoDialogue = () => {
const locale = useLocale(useAtom(Language)[0], useAtom(LanguagePack)[0]);
const [isExiting, setIsExiting] = useState(false);
const [isShowing, setIsShowing] = useState(false);
useEffect(() => () => {
setIsShowing(false);
setIsExiting(true);
}, []);
const transition = {
duration: isExiting ? 1.5 : 1.7,
ease: Forceful,
};
return (
<motion.div
initial={{
y: "70vh",
flexGrow: 1,
margin: "auto 2vh 4vh auto",
maxHeight: "calc(100% - 4vh)",
width: "min(650px, 80vw)",
}}
animate={{ y: "0vh" }}
exit={{ y: "70vh" }}
transition={transition}
className={joinClasses(bodyStyles["desc-1"], "overflow-hidden rel z1")}
key={"desc-1"}
>
<motion.div
initial={{
color: "#000",
width: "100%",
padding: "1em 0.8em",
marginBottom: "1.2em",
fontFamily: "Oswald",
fontWeight: "lighter",
fontSize: "1.3em",
backgroundColor: "#E8E8E8",
}}
layout={"position"}
className={"overflow-auto-y z0"}
>
{locale("content.main.1.desc.summary")}
{
isShowing &&
<>
{locale("content.main.1.desc.ext").split("\n").map(line => (
<>
<br/>{line}
</>
))}
</>
}
</motion.div>
<DescriptionToggleBtn onClick={setIsShowing} initial={isShowing}/>
</motion.div>
);
};
interface IDesktopPanelProps {
LPanelIndexChange: (index: number) => void;
LPanelOnIndexAnimStart: (from: number, to: number) => void;
RPanelCurrentIndex: number;
InitialIndex?: number;
}
const DesktopPanel: FC<IDesktopPanelProps> = ({ LPanelOnIndexAnimStart, LPanelIndexChange, RPanelCurrentIndex, InitialIndex }) => {
// const []
const [isPortrait] = useAtom(IsPortrait);
useEffect(() => {}, [isPortrait]);
return (
<AnimatePresence>
{isPortrait && <>
<LeftPanel onIndexChange={LPanelIndexChange} onIndexAnimStart={LPanelOnIndexAnimStart} initIndex={InitialIndex}/>
<RightPanel currentIndex={RPanelCurrentIndex}/>
</>}
</AnimatePresence>
);
};
const OverviewScreen = () => {
return (
<motion.div>
</motion.div>
);
};

21
components/body/Body.module.scss Normal file
View File

@ -0,0 +1,21 @@
.preview-background, .index-panel {
grid-column-start: 1;
grid-row-start: 1;
}
.right-panel {
grid-row-start: 1;
grid-column-start: 2;
margin-left: auto;
}
.index-panel, .right-panel {
text, tspan {
pointer-events: none;
}
}
.desc-1, .desc-1-title {
grid-row-start: 1;
grid-column-start: 2;
}

275
components/body/left-panel.tsx Normal file
View File

@ -0,0 +1,275 @@
import { FC, useEffect, useState } from "react";
import { AnimatePresence, motion, useAnimation, usePresence } from "framer-motion";
import { emptyFunc, joinClasses, waitAsync } from "@utils/common";
import { Forceful, SlowDown } from "@utils/anims";
import bodyStyles from "@components/body/Body.module.scss";
interface IIndex {
initIndex?: number;
onIndexAnimStart?: (from: number, to: number) => void;
onIndexAnimEnd?: (from: number, to: number) => void;
onIndexChange?: (index: number) => void;
}
export const LeftPanel: FC<IIndex> = ({
onIndexAnimStart= emptyFunc,
onIndexAnimEnd= emptyFunc,
onIndexChange= emptyFunc,
initIndex = 1
}) => {
const [isPresent, safeToRemove] = usePresence();
const [init, setInit] = useState(true);
const [indexSubU, setIndexSubU] = useState(initIndex - 1);
const [indexMain, setIndexMain] = useState(initIndex);
const [indexSubL, setIndexSubL] = useState(initIndex + 1);
const [indexPolygon, setIndexPolygon] = useState(0);
const [isAnimating, setIsAnimating] = useState(false);
const indexMainController = useAnimation();
const indexSubLController = useAnimation();
const indexSubUController = useAnimation();
const InnerPolygonVariants = {
0: { d: "M0,0V928H0L0,0Z" },
1: { d: "M0,28V928H175L425,0Z" },
2: { d: "M0,28V928H425L175,0Z" },
3: { d: "M0,28V928H280L280,0Z" }
};
const OuterPolygonVariants = {
0: { d: "M0,0V928H0L0,0Z" },
1: { d: "M0,28V928H240L490,0" },
2: { d: "M0,28V928H490L240,0" },
3: { d: "M0,28V928H310L310,0Z" }
};
const IndexTextVariants = {
0: { transform: "translate(220px, 600px) rotate(-74deg)" },
1: { transform: "translate(220px, 600px) rotate(-74deg)" },
2: { transform: "translate(250px, 600px) rotate(-105deg)" },
3: { transform: "translate(220px, 600px) rotate(-90deg)" },
};
const transition = {
duration: init ? 1 : 2,
ease: Forceful,
};
useEffect(() => {
setIndexPolygon(indexMain);
onIndexChange(indexMain);
indexMainController.set({ y: 830, x: 200 , transition: { duration: 1.2, ease: SlowDown }});
void indexMainController.start({ x: 0 });
waitAsync(1000).then(
() => {
indexMainController.set({ transition });
setInit(false);
}
);
indexSubLController.set({ y: 1670 });
indexSubUController.set({ y: -10 });
return () => {
indexMainController.stop();
indexSubLController.stop();
indexSubUController.stop();
};
}, [isPresent]);
const indexTextConfig = {
fontFamily: "Jetbrains Mono",
fontStyle: "bold",
fontSize: 62,
fill: "#fff",
transition,
};
const indexNumConfig = {
className: "no-pointer",
stroke: "#1D1D1D",
fill: "#1D1D1D",
fontFamily: "Jetbrains Mono",
fontStyle: "italic",
fontSize: 1000,
x: -180,
};
const HandleScroll = async (event: WheelEvent) => {
if (isAnimating) return;
const down = event.deltaY > 0;
// LOWER_INDEX_BOUND UPPER_INDEX_BOUND
await shiftNumberSequence(down, (indexMain < 2 && !down) || (indexMain > 2 && down));
};
const shiftNumberSequence = async (increment: boolean, wrap = false) => {
setIsAnimating(true);
const oldValue = indexMain;
const newValue = wrap ? (increment ? 1 : 3) : (oldValue + (increment ? 1 : -1));
onIndexAnimStart(oldValue, newValue);
if (wrap) {
increment ? setIndexSubL(newValue) : setIndexSubU(newValue);
}
setIndexPolygon(newValue);
await Promise.all(
increment ?
[
indexSubLController.start({ y: 830 }),
indexMainController.start({ y: -10 }),
] :
[
indexSubUController.start({ y: 830 }),
indexMainController.start({ y: 1670 })
]
);
await waitAsync(20);
setIndexMain(newValue);
onIndexChange(newValue);
indexMainController.set({ y: 830 });
increment ? indexSubLController.set({ y: 1670 }) : indexSubUController.set({ y: -10 });
setIndexSubL(newValue + 1);
setIndexSubU(newValue - 1);
setIsAnimating(false);
onIndexAnimEnd(oldValue, newValue);
return Promise.resolve();
};
const commonPolygonProps = {
animate: indexPolygon.toString(),
transition,
initial: "0",
};
return (
<motion.svg
className={joinClasses("fh z2", bodyStyles["index-panel"])}
layout
viewBox="0 29 520 880"
fill="none"
xmlns="http://www.w3.org/2000/svg"
pointerEvents={"none"}
>
<motion.path
filter="url(#filter0_bd_140_3)"
fill="white"
fillOpacity="0.47"
variants={OuterPolygonVariants}
{...commonPolygonProps}
/>
<motion.path
filter="url(#filter0_d_116_13)"
onWheel={(e) => HandleScroll(e as unknown as WheelEvent)}
pointerEvents={"all"}
fill="black"
variants={InnerPolygonVariants}
{...commonPolygonProps}
/>
<g clipPath={"url(#index__inner-poly)"}>
<motion.text
{...indexNumConfig}
initial={{ y: -10 }}
animate={indexSubUController}
transition={transition}
>
{indexSubU}
</motion.text>
<motion.text
{...indexNumConfig}
animate={indexMainController}
transition={transition}
>
{indexMain}
</motion.text>
<motion.text
{...indexNumConfig}
animate={indexSubLController}
transition={transition}
>
{indexSubL}
</motion.text>
<motion.g
id={"label"}
variants={IndexTextVariants}
initial={"0"}
animate={indexPolygon.toString()}
transition={transition}
>
<AnimatePresence>
{
indexPolygon === 1 &&
<motion.text
initial={{ x: -700 }}
animate={{ x: 0 }}
exit={{ x: 1300 }}
{...indexTextConfig}
>
OVERVIEW
</motion.text>
}
</AnimatePresence>
<AnimatePresence>
{
indexPolygon === 2 &&
<g transform={"rotate(180)"}>
<motion.text
initial={{ x: 400 }}
animate={{ x: -500 }}
exit={{ x: -1800 }}
{...indexTextConfig}
>
<tspan x={188}>PROTOCOL FIELD</tspan>
<tspan x={0} dy={60}>RECOVERY DEPARTMENT</tspan>
</motion.text>
</g>
}
</AnimatePresence>
<AnimatePresence>
{
indexPolygon === 3 &&
<motion.text
initial={{ x: -1050 }}
animate={{ x: -150 }}
exit={{ x: 900 }}
{...indexTextConfig}
>
COORDINATE RECORDS
</motion.text>
}
</AnimatePresence>
</motion.g>
</g>
<text
transform="rotate(90) translate(370 0)"
{...Object.assign(indexTextConfig, { fontSize: 20 })}
>
{"<-SCROLL->"}
</text>
<defs>
<clipPath id={"index__inner-poly"}>
<motion.path
variants={InnerPolygonVariants}
{...commonPolygonProps}
/>
</clipPath>
<filter id="filter0_bd_140_3" x="-30" y="0" width="554" height="964.347" filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImage" stdDeviation="2" />
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_140_3" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha" />
<feOffset />
<feGaussianBlur stdDeviation="14.5" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.48 0" />
<feBlend mode="normal" in2="effect1_backgroundBlur_140_3" result="effect2_dropShadow_140_3" />
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_140_3" result="shape" />
</filter>
<filter id="filter0_d_116_13" x="-1" y="0" width="427.424" height="914.694" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="3"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_116_13"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_116_13" result="shape"/>
</filter>
</defs>
</motion.svg>
);
};

195
components/body/right-panel.tsx Normal file
View File

@ -0,0 +1,195 @@
import { FC, useEffect, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import bodyStyles from "@components/body/Body.module.scss";
import { joinClasses, waitAsync } from "@utils/common";
import { Forceful } from "@utils/anims";
export const RightPanel: FC<{ currentIndex: number }> = ({ currentIndex }) => {
const [init, setInit] = useState(true);
const [indexPolygon, setIndexPolygon] = useState(0);
useEffect(() => {
setIndexPolygon(currentIndex);
waitAsync(1000).then(() => setInit(false));
}, []);
const transition = {
duration: init ? 1.5 : 2,
ease: Forceful,
};
const OuterPolygonVariants = {
0: {
d: "M800,0H800V907H800Z",
fillOpacity: 0,
},
1: {
d: "M250,0H800V907H4Z",
fillOpacity: 0.47,
},
2: {
d: "M40,0H800V907H380Z",
fillOpacity: 0.47,
},
3: {
d: "M430,0H800V907H430Z",
fillOpacity: 0.05,
},
};
const InnerPolygonVariants = {
0: {
d: "M800,0H800V907H800Z",
fillOpacity: 0,
},
1: {
d: "M300,0H800V907H54Z",
fillOpacity: 0.5,
},
2: {
d: "M90,0H800V907H430Z",
fillOpacity: 0.5,
},
3: {
d: "M480,0H800V907H480Z",
fillOpacity: 0.1,
},
};
const commonPolygonProps = {
animate: (init ? indexPolygon : currentIndex).toString(),
initial: "0",
fill: "#fff",
transition,
};
const largeTextProps = {
fontFamily: "Oswald",
fontSize: 300,
fill: "#000",
opacity: .3,
fontWeight: "500",
};
const largeText1UProps = {
initial: { opacity: 0, x: 450 },
animate: { opacity: .3, x: 0 },
exit: { opacity: 0, x: -450 },
};
const largeText1LProps = {
initial: { opacity: 0, x: 600 },
animate: { opacity: .3, x: 0 },
exit: { opacity: 0, x: -600 },
};
const largeText2Props = {
fontSize: 250,
fontWeight: "bold",
};
return (
<motion.svg
viewBox="0 0 800 907"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={joinClasses("fh z1", bodyStyles["right-panel"])}
>
<motion.path
filter="url(#filter0_bd_186_4)"
variants={OuterPolygonVariants}
{...commonPolygonProps}
/>
<motion.path
filter="url(#filter1_bd_186_4)"
variants={InnerPolygonVariants}
{...commonPolygonProps}
/>
<g clipPath={"url(#right-inner-polygon"}>
<AnimatePresence>
{
currentIndex === 1 && <>
<motion.text
{...Object.assign(largeTextProps, largeText1UProps)}
transition={transition}
key={"index-1-text-1"}
>
<tspan y={220} x={-120}>ENDFIELD</tspan>
</motion.text>
<motion.text
{...Object.assign(largeTextProps, largeText1LProps)}
transition={transition}
key={"index-1-text-2"}
>
<tspan y={480} x={120}>EXPLORATION</tspan>
</motion.text>
</>
}
</AnimatePresence>
<AnimatePresence>
{
currentIndex === 2 && <>
<motion.text
{...Object.assign(largeTextProps, largeText2Props, largeText1UProps)}
transition={transition}
key={"index-2-text-1"}
>
<tspan y={220} x={-120}>PROTOCOL</tspan>
</motion.text>
<motion.text
{...Object.assign(largeTextProps, largeText2Props, largeText1LProps)}
transition={transition}
key={"index-2-text-2"}
>
<tspan y={450} x={190}>FIELD</tspan>
</motion.text>
<motion.text
{...Object.assign(largeTextProps, largeText2Props, largeText1UProps)}
transition={transition}
key={"index-2-text-3"}
>
<tspan y={680} x={120}>RECOVERY</tspan>
</motion.text>
<motion.text
{...Object.assign(largeTextProps, largeText2Props, largeText1LProps)}
transition={transition}
key={"index-2-text-4"}
>
<tspan y={910} x={120}>DEPARTMENT</tspan>
</motion.text>
</>
}
</AnimatePresence>
</g>
<defs>
<clipPath id={"right-inner-polygon"}>
<motion.path
variants={InnerPolygonVariants}
{...Object.assign(commonPolygonProps, { fill: undefined, fillOpacity: 1 })}
/>
</clipPath>
<filter id="filter0_bd_186_4" x="0.290833" y="-3.13477" width="800" height="919" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImage" stdDeviation="2"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_186_4"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="-4"/>
<feGaussianBlur stdDeviation="5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="effect1_backgroundBlur_186_4" result="effect2_dropShadow_186_4"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_186_4" result="shape"/>
</filter>
<filter id="filter1_bd_186_4" x="28.0472" y="-20.1091" width="800" height="949" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImage" stdDeviation="10.5"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_186_4"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="-2"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="effect1_backgroundBlur_186_4" result="effect2_dropShadow_186_4"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_186_4" result="shape"/>
</filter>
</defs>
</motion.svg>
);
};

99
components/checkbox.tsx Normal file
View File

@ -0,0 +1,99 @@
import { motion } from "framer-motion";
import { FC, useEffect, useState } from "react";
import { Forceful } from "@utils/anims";
import { OverridableStyle } from "@utils/common";
interface ICheckbox {
disabled?: boolean;
checked: boolean;
onChange?: (checked: boolean) => void;
fg?: string;
bg?: string;
animDur?: number;
h?: number | string;
w?: number | string;
}
export const Checkbox: FC<ICheckbox & OverridableStyle> = (
{
checked,
fg = "#000",
bg = "transparent",
h,
w,
animDur = 0.5,
onChange,
overrideStyles
}
) => {
const [isChecked, setIsChecked] = useState(checked);
useEffect(() => {
setIsChecked(checked);
}, [checked]);
const transition = {
duration: animDur,
ease: Forceful,
};
const handleClick = () => {
setIsChecked(!isChecked);
if (onChange) onChange(!isChecked);
};
const markVariants = {
checked: { transform: "scaleX(1)" },
unchecked: { transform: "scaleX(0)" },
};
return (
<button onClick={handleClick} style={overrideStyles}>
<motion.svg
viewBox="0 0 312 300"
xmlns="http://www.w3.org/2000/svg"
fill={bg}
animate={{
height: h,
width: w,
}}
transition={transition}
>
<rect x="8.5" y="8.49988" width="283" height="283" stroke="black" strokeWidth="17"/>
<motion.rect
fill={bg}
transition={transition}
initial={{
width: 150,
height: 150,
x: 150,
y: 0
}}
animate={{
x: isChecked ? 152 : 300,
y: isChecked ? 0 : -150,
}}
/>
<motion.line
x1="143.261"
y1="200.609"
x2="53.129"
y2="124.538"
stroke={fg}
strokeWidth="23"
initial={isChecked ? "checked" : "unchecked"}
animate={isChecked ? "checked" : "unchecked"}
variants={markVariants}
transition={transition}
/>
<motion.line
x1="135.603"
y1="208.884"
x2="302.595"
y2="13.8711"
stroke={fg}
strokeWidth="23"
initial={isChecked ? "checked" : "unchecked"}
animate={isChecked ? "checked" : "unchecked"}
variants={markVariants}
transition={transition}
/>
</motion.svg>
</button>
);
};

166
components/footer.tsx Normal file
View File

@ -0,0 +1,166 @@
import { FC, useEffect, useState } from "react";
import { Box } from "@chakra-ui/react";
import { motion, useAnimation } from "framer-motion";
import { Forceful, SlowDown } from "@utils/anims";
import { joinClasses, useLocale } from "@utils/common";
import { HypergryphLogo } from "@components/logo/Hypergryph/Hypergryph";
import { MountainContourLogo } from "@components/logo/MountainContour/MountainContour";
import { Anchor } from "@components/anchor";
import terrainStyles from "./terrain.module.scss";
import { Language, LanguagePack } from "@states/global";
import { useAtom } from "jotai";
import { InImageFullScreenMode } from "@components/images";
export const Footer: FC = () => {
const [inImageFullScreenMode] = useAtom(InImageFullScreenMode);
const LogoAnimConfig = (delay = 0) => ({
initial: {
y: 50,
},
animate: {
y: 0,
},
transition: {
duration: .8,
ease: SlowDown,
delay,
}
});
const [lang] = useAtom(Language);
return (
<motion.div
className={"abs l0"}
initial={{ bottom: -90 }}
animate={{ bottom: inImageFullScreenMode ? -90 : 0 }}
transition={{ duration: 0.5, ease: Forceful }}
>
<Box
h={"88px"}
w={"100vw"}
bg={"#000"}
borderTop={"1px solid #fff"}
className={"rel flex a-flex-center j-flex-space-between"}
>
<TerrainMap />
<Box w={350} className={"fh flex"} paddingLeft={(70 / 1920 * 100) + "%"} zIndex={2}>
<HypergryphLogo
woke
link
dontAnimateChild
overrideStyles={{width: "55%"}}
{...LogoAnimConfig(.1)}
/>
<MountainContourLogo
dontAnimateChild
overrideStyles={{width: "45%"}}
{...LogoAnimConfig(.3)}
/>
</Box>
<FooterText lang={lang}/>
</Box>
</motion.div>
);
};
const FooterText: FC<{ lang: string }> = ({ lang }) => {
const locale = useLocale(lang, useAtom(LanguagePack)[0]);
const control = useAnimation();
const sequence = async () => {
await control.start({ opacity: 0 });
await control.start({ opacity: 1 });
};
const [smallHorizontal, setSmallHorizontal] = useState(false);
const listener = () => {
const portrait = window.innerWidth < 814;
if (smallHorizontal !== portrait)
setSmallHorizontal(_current => portrait !== _current ? portrait : _current);
};
useEffect(() => {
void sequence();
listener();
window.addEventListener('resize', listener);
return () => {
window.removeEventListener('resize', listener);
control.start({ opacity: 0 }).then(control.stop);
};
} , [locale]);
return (
<motion.div
initial={{
opacity: 0,
display: "contents",
}}
animate={{
opacity: 1,
}}
transition={{
duration: .5,
ease: Forceful,
}}
layout
>
<Box
as="p"
p={4}
color={"hsl(213, 0%, 70%)"}
fontFamily={"JetBrains Mono"}
textAlign="right"
zIndex={1}
whiteSpace="nowrap"
maxWidth={"70%"}
isTruncated
>
{locale(smallHorizontal ? "footer.fanmade::short" : "footer.fanmade")}
<br/>
<Anchor to="https://endfield.gryphline.com">{locale("footer.to-offcl")}</Anchor>&thinsp;|&thinsp;
<Anchor to="https://endfield.hypergryph.com">{locale("footer.cn-ver")}</Anchor>
<br/>
<Anchor to="https://amane.my.id">Amane</Anchor>
&thinsp;&bull;&thinsp;
<Anchor to="https://endfield.gryphline.com">{locale("footer.viewsrc")}</Anchor>
</Box>
</motion.div>
);
};
const TerrainMap = () => {
return(
<motion.div
style={{
width: "700px",
}}
className={"fh abs t0 l0 overflow-hidden z0"}
>
<svg className={terrainStyles["terrain-view"]} viewBox="1 30 485 1140.294" width="700" opacity={.5}>
<defs>
<linearGradient id={"footer__terrain-cover"}>
<stop offset={"0%"} stopColor={"#00000000"}/>
<stop offset={"98%"} stopColor={"#000"}/>
</linearGradient>
</defs>
<path id={terrainStyles["_b2"]} className={terrainStyles["terrain"]}/>
<path id={terrainStyles["_b1"]} className={joinClasses(terrainStyles["terrain"], terrainStyles["highlight"])}/>
<path id={terrainStyles["_1"]} className={terrainStyles["terrain"]}/>
<path id={terrainStyles["_2"]} className={terrainStyles["terrain"]}/>
<path id={terrainStyles["_3"]} className={terrainStyles["terrain"]}/>
<path id={terrainStyles["_4"]} className={joinClasses(terrainStyles["terrain"], terrainStyles["highlight"])}/>
<path id={terrainStyles["_5"]} className={terrainStyles["terrain"]}/>
<path id={terrainStyles["_6"]} className={terrainStyles["terrain"]}/>
<path id={terrainStyles["_7"]} className={terrainStyles["terrain"]}/>
<path id={terrainStyles["_8"]} className={joinClasses(terrainStyles["terrain"], terrainStyles["highlight"])}/>
<path id={terrainStyles["_9"]} className={terrainStyles["terrain"]}/>
<path id={terrainStyles["_10"]} className={terrainStyles["terrain"]}/>
<path id={terrainStyles["_11"]} className={terrainStyles["terrain"]}/>
<path id={terrainStyles["_12"]} className={joinClasses(terrainStyles["terrain"], terrainStyles["highlight"])}/>
<path id={terrainStyles["_13"]} className={terrainStyles["terrain"]}/>
<path id={terrainStyles["_14"]} className={terrainStyles["terrain"]}/>
<path id={terrainStyles["_15"]} className={terrainStyles["terrain"]}/>
<path id={terrainStyles["_16"]} className={joinClasses(terrainStyles["terrain"], terrainStyles["highlight"])}/>
<path id={terrainStyles["_17"]} className={terrainStyles["terrain"]}/>
<rect x={0} y={0} width={500} height={1140.294} fill={"url(#footer__terrain-cover)"}/>
</svg>
</motion.div>
);
};

414
components/header.tsx Normal file
View File

@ -0,0 +1,414 @@
import { useRouter } from "next/router";
import { FC, ReactNode, useEffect, useState } from "react";
import { Box } from "@chakra-ui/react";
import { useAtom } from "jotai";
import { AnimatePresence, motion } from "framer-motion";
import { AvailableLanguages, Language, LanguagePack } from "@states/global";
import { localGet, localSet, Nullable, OverridableStyle, useLocale } from "@utils/common";
import { Forceful, SlowDown } from "@utils/anims";
import { MotionBox } from "./motion";
import { LogoSmall_CN } from "@components/logo/CN/CN-small";
import { LogoSmall_EN } from "@components/logo/EN/EN-small";
import { LogoSmall_JP } from "@components/logo/JP/JP-small";
import { LogoSmall_KR } from "@components/logo/KR/KR-small";
import { Checkbox } from "@components/checkbox";
import { InImageFullScreenMode } from "@components/images";
function resolveConfig(lang: Nullable<string>)
{
switch (lang)
{
case "cn":
return {
marginLeft: "4%",
height: "80%"
};
case "en":
return {
marginLeft: "3%",
height: "85%"
};
case "jp":
return {
marginLeft: "2.5%",
height: "85%"
};
case "kr":
return {
marginLeft: "2.5%",
height: "80%"
};
default:
return {
marginLeft: "auto",
height: "85%"
};
}
}
const transition = {
duration: 0.5,
ease: Forceful
};
export const Header: FC = () => {
const router = useRouter();
const [currentLanguage, setCurrentLanguage] = useAtom(Language);
const [inImageFullScreenMode] = useAtom(InImageFullScreenMode);
const [settingsUIVisible, setSettingsUIVisible] = useState(false);
const [logoStyle, setLogoStyle] = useState(currentLanguage);
let HoverTimeout: Nullable<ReturnType<typeof setTimeout>> = null;
let ToggleTimeout = false;
const handleToggle = (newState: boolean, hover = false) => {
if (ToggleTimeout && !hover)
return;
if (!hover)
{
setSettingsUIVisible(newState);
ToggleTimeout = true;
setTimeout(() => {
ToggleTimeout = false;
}, 500);
}
else {
HoverTimeout = setTimeout(() => {
setSettingsUIVisible(newState);
HoverTimeout = null;
}, 500);
}
};
return (
<AnimatePresence>
<motion.div
className={"abs l0 z5"}
initial={{ top: -90 }}
animate={{ top: inImageFullScreenMode ? -90 : 0 }}
transition={{ duration: 0.5, ease: Forceful }}
>
<Box
h={"88px"}
w={"100vw"}
bg={"#000"}
borderBottom={"1px solid #fff"}
className={"rel flex a-flex-center j-flex-space-between"}
>
<Box {...resolveConfig(logoStyle)}>
<AnimatePresence
exitBeforeEnter
onExitComplete={() => setLogoStyle(currentLanguage)}
>
{currentLanguage === 'cn' && <LogoSmall_CN key={"logo-endfield-cn-smol"}/>}
{currentLanguage === 'en' && <LogoSmall_EN key={"logo-endfield-en-smol"}/>}
{currentLanguage === 'jp' && <LogoSmall_JP key={"logo-endfield-jp-smol"}/>}
{currentLanguage === 'kr' && <LogoSmall_KR key={"logo-endfield-kr-smol"}/>}
</AnimatePresence>
</Box>
<div/>
<Box
className={"flex a-flex-center"}
fontFamily={"Jetbrains Mono"}
onMouseLeave={() => handleToggle(false, true)}
onMouseEnter={() => {
if (HoverTimeout)
clearTimeout(HoverTimeout);
HoverTimeout = null;
}}
>
<AnimatePresence>
{settingsUIVisible &&
<SettingsUI
onLangChange={async (newLang) => {
if (newLang === currentLanguage) return;
router.query.lang = newLang;
await router.push({
pathname: router.pathname,
query: {
...router.query,
lang: newLang
}
}, undefined, { shallow: true });
setCurrentLanguage(newLang);
}}
/>
}
</AnimatePresence>
<SettingsToggle
active={settingsUIVisible}
onClick={() => handleToggle(!settingsUIVisible)}
/>
</Box>
</Box>
</motion.div>
</AnimatePresence>
);
};
interface ISettingsToggle {
active: boolean;
onClick: () => void;
}
const SettingsToggle: FC<ISettingsToggle> = ({ active, onClick }) => {
const locale = useLocale(useAtom(Language)[0], useAtom(LanguagePack)[0]);
const [isHover, setIsHover] = useState(false);
const [isSmall, setIsSmall] = useState(false);
useEffect(() => {
window.addEventListener('resize', () => {
if (isSmall === window.innerWidth < 720) return;
setIsSmall(window.innerWidth < 720);
});
}, [window.innerWidth]);
return (
<button
onClick={onClick}
onMouseEnter={() => setIsHover(true)}
onMouseLeave={() => setIsHover(false)}
className={"rel exclusion"}
>
<MotionBox
initial={{
padding: "0.5rem 1.5rem 0.5rem 0.5rem",
}}
animate={{
paddingRight: isSmall ? "0.2rem" : "1.5rem",
}}
gap={"2px"}
color={"#fff"}
className={"flex a-flex-center j-flex-center"}
transition={transition}
layout={"position"}
>
<SettingsIcon/>
<AnimatePresence>
<motion.p
initial={{ opacity: 0, width: 0 }}
animate={{ opacity: 1, width: isSmall ? 0 : "100%" }}
exit={{ opacity: 0, width: 0 }}
transition={transition}
style={{whiteSpace: "nowrap", overflow: "hidden"}}
layout={"position"}
>
{locale("settings.label")}
</motion.p>
</AnimatePresence>
</MotionBox>
<motion.div
className={"abs fh t0 r0"}
animate={{
background: "#fff",
width: "0.5em",
x: (active || isHover) ? 0 : "0.5em",
}}
transition={transition}
/>
</button>
);
};
const settingsUIStates = {
hidden: {
y: "-100%",
transition: {
delay: 0.12,
...transition,
}
},
visible: {
y: 0,
transition: {
...transition,
staggerChildren: 0.3,
}
},
visibleSmall: {
y: 88,
transition,
},
childHidden: {
opacity: 0,
y: -10,
transition,
},
childVisible: {
opacity: 1,
y: 0,
transition: {
delay: 0.3,
duration: 0.5,
ease: SlowDown,
}
}
};
const SettingsItem: FC<{ children?: ReactNode } & OverridableStyle> = (
{
children = null,
overrideStyles
}
) => {
return (
<motion.div
className={"rel fw flex a-flex-center j-flex-space-between"}
style={{
padding: "4px",
...overrideStyles
}}
variants={settingsUIStates}
initial="childHidden"
animate="childVisible"
exit="childHidden"
layout={"position"}
>
{children}
</motion.div>
);
};
interface ISettings {
onLangChange: (newLang: string) => void;
}
const SettingsUI: FC<ISettings> = ({ onLangChange }) => {
const [lang] = useAtom(Language);
const locale = useLocale(lang, useAtom(LanguagePack)[0]);
const router = useRouter();
const [fullIntro, setFullIntro] = useState(false);
const [currentLanguage, setCurrentLanguage] = useState(lang);
const availableLangs = AvailableLanguages.map(l => l.toUpperCase());
const btnVariants = {
langBtn: {
opacity: 1,
color: "#fff",
backgroundColor: "#000",
},
langBtnHover: {
color: "#000",
backgroundColor: "#fff",
},
langBtnInactive: {
color: "#fff",
backgroundColor: "#626262",
}
};
const updateLanguage = (newLang: string) => {
setCurrentLanguage(newLang);
onLangChange(newLang);
};
useEffect(() => {
setFullIntro(localGet("fullIntro") === "true");
}, [fullIntro, currentLanguage]);
const fullIntroSTChange = (newValue: boolean) => {
setFullIntro(newValue);
localSet("fullIntro", (newValue).toString());
void router.push({
pathname: "/",
query: Object.fromEntries(Object.entries({
lang: currentLanguage,
fullIntro: newValue ? newValue : undefined
}).filter(([, value]) => !!value))
}, undefined, { shallow: true });
};
return (
<motion.div
variants={settingsUIStates}
initial={"hidden"}
animate={["visible", window.innerWidth < 720 ? "visibleSmall" : ""]}
exit={"hidden"}
className={"abs t0 r0 flex flex-col"}
style={{
background: "#fff",
// mixBlendMode: window.innerWidth < 720 ? "exclusion" : "normal"
}}
layout
>
<Box className={"fw"} h={1} padding={`${window.innerWidth < 720 ? 0 : 82}px 7px 5px 7px`}/>
<SettingsItem>
<Box as={"p"} fontFamily={"Jetbrains Mono"} p={4}>{locale("language")}</Box>
<Box fontFamily={"Jetbrains Mono"} p={4} className={"flex"}>
{availableLangs.map((_lang, i) => {
const sameLanguage = _lang.toLowerCase() === currentLanguage;
return (
<motion.button
key={i}
onClick={() => updateLanguage(_lang.toLowerCase())}
variants={btnVariants}
initial={sameLanguage ? "langBtnInactive" : "langBtn"}
whileHover={sameLanguage ? "langBtnInactive" : "langBtnHover"}
animate={sameLanguage ? "langBtnInactive" : "langBtn"}
className={sameLanguage ? "no-pointer" : ""}
style={{padding: "0.1em"}}
>
{_lang}
</motion.button>
);
})}
</Box>
</SettingsItem>
<SettingsItem overrideStyles={{ paddingTop: 0, paddingBottom: 8, paddingLeft: 0 }}>
<Box paddingLeft={5}>{locale("settings.full-intro.title")}</Box>
<Box paddingInline={4}>
<Checkbox
checked={fullIntro}
h={"25px"}
w={"26px"}
onChange={fullIntroSTChange}
bg={"#fff"}
/>
</Box>
<Box
as={"i"}
className={"abs fw txt-algn-center"}
fontSize={"0.75rem"} top={"73%"}
>
{locale("settings.full-intro.desc")}
</Box>
</SettingsItem>
<Box className={"fw"} h={1} padding={"7px"}/>
</motion.div>
);
};
const SettingsIcon = () => {
return (
<motion.svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300.112 300.112"
width="1.5rem"
height="1.5rem"
>
<path fill="#fff" d="M150.057,105.1c-24.789,0-44.955,20.167-44.955,44.955s20.166,44.955,44.955,44.955
c24.789,0,44.955-20.167,44.955-44.955S174.845,105.1,150.057,105.1z M150.057,178.36c-15.607,0-28.305-12.697-28.305-28.305
s12.697-28.305,28.305-28.305c15.608,0,28.305,12.697,28.305,28.305S165.663,178.36,150.057,178.36z"/>
<path fill="#fff" d="M297.365,183.342l-25.458-22.983v-20.608l25.457-22.981c2.614-2.361,3.461-6.112,2.112-9.366l-13.605-32.846
c-1.348-3.253-4.588-5.305-8.115-5.128l-34.252,1.749l-14.571-14.571l1.749-34.251c0.18-3.518-1.874-6.769-5.128-8.116
L192.707,0.635c-3.253-1.35-7.005-0.501-9.365,2.111l-22.984,25.458h-20.606L116.77,2.746c-2.361-2.613-6.112-3.458-9.365-2.111
L74.559,14.24c-3.255,1.348-5.308,4.599-5.128,8.116l1.75,34.251L56.609,71.178l-34.252-1.749
c-3.506-0.188-6.768,1.874-8.115,5.128L0.635,107.403c-1.348,3.255-0.502,7.005,2.112,9.366l25.457,22.981v20.608L2.749,183.341
c-2.614,2.361-3.461,6.112-2.112,9.366l13.605,32.846c1.348,3.255,4.603,5.321,8.115,5.128l34.252-1.749l14.572,14.571
l-1.75,34.251c-0.18,3.518,1.874,6.769,5.128,8.116l32.846,13.606c3.255,1.352,7.005,0.502,9.365-2.111l22.984-25.458h20.606
l22.984,25.458c1.613,1.785,3.873,2.746,6.182,2.746c1.071,0,2.152-0.208,3.183-0.634l32.846-13.606
c3.255-1.348,5.308-4.599,5.128-8.116l-1.749-34.251l14.571-14.571l34.252,1.749c3.506,0.178,6.768-1.874,8.115-5.128
l13.605-32.846C300.825,189.453,299.979,185.703,297.365,183.342z M272.737,213.754l-32.079-1.639
c-2.351-0.127-4.646,0.764-6.311,2.428l-19.804,19.804c-1.666,1.666-2.547,3.958-2.428,6.311l1.638,32.079l-21.99,9.109
l-21.525-23.843c-1.578-1.747-3.824-2.746-6.179-2.746h-28.006c-2.355,0-4.601,0.998-6.179,2.746l-21.525,23.843l-21.99-9.109
l1.639-32.079c0.12-2.353-0.763-4.646-2.429-6.311l-19.803-19.804c-1.665-1.665-3.955-2.55-6.311-2.428l-32.079,1.639
l-9.109-21.99l23.842-21.525c1.748-1.58,2.746-3.824,2.746-6.179v-28.008c0-2.355-0.998-4.601-2.746-6.179l-23.842-21.525
l9.109-21.99l32.079,1.639c2.354,0.124,4.646-0.763,6.311-2.428l19.803-19.803c1.666-1.666,2.549-3.958,2.429-6.313
l-1.639-32.079l21.99-9.109l21.525,23.842c1.578,1.747,3.824,2.746,6.179,2.746h28.006c2.355,0,4.601-0.998,6.179-2.746
l21.525-23.842l21.99,9.109l-1.638,32.079c-0.12,2.353,0.761,4.645,2.428,6.313l19.804,19.803
c1.666,1.665,3.959,2.564,6.311,2.428l32.079-1.639l9.109,21.99l-23.843,21.525c-1.748,1.58-2.746,3.824-2.746,6.179v28.008
c0,2.355,0.998,4.601,2.746,6.179l23.843,21.525L272.737,213.754z"/>
<path fill="#fff" d="M150.057,71.357c-43.394,0-78.698,35.305-78.698,78.698c0,43.394,35.304,78.698,78.698,78.698
c43.394,0,78.698-35.305,78.698-78.698C228.754,106.661,193.45,71.357,150.057,71.357z M150.057,212.103
c-34.214,0-62.048-27.834-62.048-62.048c0-34.214,27.834-62.048,62.048-62.048c34.214,0,62.048,27.834,62.048,62.048
C212.105,184.269,184.269,212.103,150.057,212.103z"/>
</motion.svg>
);
};

877
components/images.tsx Normal file
View File

@ -0,0 +1,877 @@
import { FC, ReactNode, useCallback, useEffect, useMemo, useState } from "react";
import { AnimatePresence, motion, MotionProps, useAnimation, usePresence } from "framer-motion";
import { joinClasses, Nullable, useLocale, waitAsync } from "@utils/common";
import { atom, useAtom } from "jotai";
import { ImageData, Language, LanguagePack } from "@states/global";
import bodyStyles from "@components/body/Body.module.scss";
import Image, { ImageProps } from "next/image";
import { SlowDown, Forceful } from "@utils/anims";
import { Logger } from "@utils/logger";
import { MotionBox, MotionFlex } from "@components/motion";
import { Box, Flex } from "@chakra-ui/react";
const ImageIndex = atom(2);
const InZoomMode = atom(false);
export const ImageGalleryInit = atom(true);
export const InImageFullScreenMode = atom(false);
const MouseMoveInZoomMode = atom(false);
const MouseMoveInZoomModeTimeout = atom<Nullable<number>>(null);
interface IImageGalleryProps {
currentPage: number;
unfocused?: boolean;
}
export const ImageGallery: FC<IImageGalleryProps> = ({ currentPage, unfocused = false }) => {
const [imageData] = useAtom(ImageData);
const [inZoomMode] = useAtom(InZoomMode);
const imageArray = useMemo(() => [...imageData.entries()].filter(v => !v[0].match(/(department|world)/g)), []);
const [currentImageIndex] = useAtom(ImageIndex);
const [currentImageURL, setCurrentImageURL] = useState(imageData.get("assets/img/bg.jpg"));
useEffect(() => {
switch (currentPage) {
case 1:
setCurrentImageURL(imageData.get("assets/img/world_bg.jpg"));
break;
case 2:
setCurrentImageURL(imageData.get("assets/img/department_bg.jpg"));
break;
default:
setCurrentImageURL(imageArray[currentImageIndex][1]);
}
}, [currentPage, currentImageIndex]);
return <AnimatePresence>
<MainBackground
key={"mainBG"}
url={currentImageURL}
unfocused={(inZoomMode && currentPage === 3) || unfocused}
overrideDelay={currentPage === 3 ? 0 : undefined}
/>
{currentPage === 3 && <>
<ImageViewer
imageArray={imageArray}
/>
</>}
</AnimatePresence>;
};
interface IImageViewerProps {
imageArray: [string, string][];
// imageIndex: number;
onImageIndexChange?: (newIndex: number) => void;
onImageFocusToggle?: (index: number) => void;
// inZoomMode?: boolean;
}
const ImageViewer: FC<IImageViewerProps> = ({
imageArray,
onImageIndexChange,
onImageFocusToggle,
}) => {
const [isPresent, safeToRemove] = usePresence();
const [inImageFullScreenMode, setInImageFullScreenMode] = useAtom(InImageFullScreenMode);
const [,setMouseMove] = useAtom(MouseMoveInZoomMode);
const [imageGalleryInit] = useAtom(ImageGalleryInit);
const [,setComponentFirstInit] = useAtom(ImageGalleryInit);
const [inZoomMode] = useAtom(InZoomMode);
const [currentImageIndex] = useAtom(ImageIndex);
const locale = useLocale(useAtom(Language)[0], useAtom(LanguagePack)[0]);
const [triggeredByMenu, setTriggeredByMenu] = useState(false);
const updateTriggeredOutbound = useCallback((value: boolean) => {
if (triggeredByMenu !== !value)
setTriggeredByMenu(() => !value);
}, []);
const commonTransition = {
duration: 0.7,
ease: SlowDown
};
const imageViewVariants = {
"initial-outbound": {
// clipPath: "polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%)",
clipPath: "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)",
y: 100
},
"initial-native": {
clipPath: "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)",
},
"expand": {
clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
y: 0
},
"exit-outbound": {
// clipPath: "polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%)",
clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",
y: 100,
transition: {
duration: 1,
ease: Forceful
}
},
"exit-native": {
clipPath: "polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)",
}
};
const imageViewAnimController = useAnimation();
const handleExpandToggle = useCallback((zoom: boolean) => {
if (zoom)
imageViewAnimController.set("initial-native");
void imageViewAnimController
.start(zoom ? "expand" : "exit-native");
}, []);
const listener = useCallback((e: KeyboardEvent) => {
Logger.instance.debug({}, "ImageViewer", "Keydown", e.key);
if (e.key === "Escape") {
setInImageFullScreenMode(false);
// handleExpandToggle(false);
}
}, []);
useEffect(() => {
let timeout: NodeJS.Timeout;
if (isPresent)
{
timeout = setTimeout(() => {
setComponentFirstInit(false);
}, 500);
window.addEventListener("keydown", listener);
}
if (inZoomMode)
void imageViewAnimController
.start(
isPresent ? "expand" : "exit-outbound",
isPresent ? { ...commonTransition, delay: 1.2 } : undefined
);
else if (imageGalleryInit)
void imageViewAnimController.set(isPresent ? "initial-outbound" : "initial-native");
return () => {
if (isPresent && timeout)
clearTimeout(timeout);
else if (!isPresent)
{
window.removeEventListener("keydown", listener);
setComponentFirstInit(true);
}
safeToRemove?.();
};
}, [isPresent]);
return <>
<ImagePicker
key={"imagePicker"}
imageArray={imageArray}
initialImageIndex={currentImageIndex}
onImageIndexChange={(newIndex) => {
updateTriggeredOutbound(false);
if (newIndex !== currentImageIndex)
onImageIndexChange?.(newIndex);
}}
onImageFocusToggle={(i, willZoom) => {
handleExpandToggle(willZoom);
onImageFocusToggle?.(i);
}}
/>
<ImageDesc
hideText={inImageFullScreenMode}
key={"imageDesc"}
uponExit={() => updateTriggeredOutbound(true)}
text={(() => {
const imgName = imageArray[currentImageIndex][0].split("/").pop()?.split(".")[0];
const text = locale(`image-desc.${imgName}`);
if (text.match(/^\{@/))
return `Extra image: ${imgName}`;
return text;
})()}
>
<MotionBox
flexGrow={1}
className={"rel fw flex a-flex-center j-flex-center"}
h={100}
backdropFilter={"blur(10px)"}
variants={imageViewVariants}
initial={"initial-outbound"}
animate={imageViewAnimController}
transition={commonTransition}
layout={"size"}
>
<MotionBox
layout
className={"rel fw"}
style={{
aspectRatio: "1920 / 1080"
}}
transition={commonTransition}
>
<AnimatePresence>
<MotionFlex
onMouseMove={() => setMouseMove(true)}
key={`image-zoom-${currentImageIndex}`}
className={"abs fw"}
m={"auto"}
layout={"position"}
justifyContent={"flex-end"}
alignItems={"flex-end"}
initial={{
opacity: 0,
// x: -20
// clipPath: "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)"
}}
animate={{
opacity: 1,
// x: 0
// clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"
}}
exit={{
opacity: 0,
// x: 20
// clipPath: "polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)"
}}
transition={{ duration: 0.5, ease: SlowDown }}
bg={
// `#${Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, '0')}`
`url(${imageArray[currentImageIndex][1]})`
}
style={{
aspectRatio: "1920 / 1080",
backgroundSize: "contain",
backgroundPosition: "center",
backgroundRepeat: "no-repeat"
}}
>
<ImageToolbar/>
</MotionFlex>
</AnimatePresence>
</MotionBox>
</MotionBox>
</ImageDesc>
</>;
};
interface IImageDescProps {
text: string;
children?: ReactNode;
uponExit?: () => void;
hideText?: boolean;
}
export const ImageDesc: FC<IImageDescProps> = ({ text: upcomingText, hideText = false, uponExit, children }) => {
const [isExiting, setIsExiting] = useState(false);
const [currentText, setCurrentText] = useState(upcomingText);
const [bgText, setBgText] = useState(upcomingText);
const [inZoomMode] = useAtom(InZoomMode);
const [inImageFullScreenMode] = useAtom(InImageFullScreenMode);
// const [componentFirstInit] = useAtom(ImageGalleryInit);
useEffect(() => {
setCurrentText(() => upcomingText);
// The description text is wrapped instantly when the new text changes that has a shorter length,
// resulting in a displeasing visual effect. This is a workaround to prevent that.
if (upcomingText.length < bgText.length && !inZoomMode)
waitAsync(390).then(() => setBgText(() => upcomingText));
else
setBgText(() => upcomingText);
return () => {
uponExit?.();
setIsExiting(true);
};
}, [upcomingText]);
return <MotionFlex
fontFamily={"Oswald"}
fontSize={"18px"}
className={"abs fw fh t0 z3 flex-col"}
left={
inImageFullScreenMode ?
0 :
"calc((100vh - 176px) / (438 / 154.29))"
}
maxW={
inImageFullScreenMode ?
"100vw" :
"calc(100vw - (100vh - 176px) / (438 / 154.29) - clamp(100px, 20vw, 270px) - 10px)"
}
h={
inImageFullScreenMode ?
"100vh" :
"calc(100vh - 176px)"
}
alignItems={"flex-start"}
layout
>
{children}
<MotionFlex
bg={"#FDFD1F"}
className={"z3 rel flex-col-rev"}
initial={{ y: (() => {
// Widget's dimension transition is distorted when set to a relative height.
// Apparently, it's unfixable, partly because
// the timing between ImageGallery's first initialization vs. this component's first initialization is different.
// So, I've set the height to 101 since it's the maximum height of the text when it's fully expanded.
// @min-res: 800x600
return /* componentFirstInit ? "100%" : */ 101;
})() }}
animate={{
y: 0,
maxHeight: hideText ? "0%" : "100%",
}}
exit={{ y: /* "100%" */ 101 }}
transition={{
duration: 0.7,
ease: SlowDown,
y: {
duration: isExiting ? 1.2 : 0.7,
delay: isExiting ? 0.1 : 1,
ease: isExiting ? Forceful : SlowDown,
},
}}
maxW={
inImageFullScreenMode ?
"100vw" :
"calc(100vw - (100vh - 176px) / (438 / 154.29) - clamp(100px, 20vw, 270px) - 10px)"
}
alignSelf={(inZoomMode || inImageFullScreenMode) ? "stretch": "flex-start"}
layout
>
<MotionBox
p={hideText ? "0px 20px" : "10px 20px"}
className={"rel overflow-hidden"}
initial={{
y: 80
}}
animate={{
y: 0,
maxHeight: hideText ? "0%" : "100%",
}}
exit={{
y: 80
}}
transition={{
duration: 0.5,
// delay: prevText?.length ?? 0 > text.length ? 0.2 : 0,
ease: Forceful,
y: {
duration: isExiting ? 1.2 : 0.7,
delay: isExiting ? 0 : 0.7,
ease: isExiting ? Forceful : SlowDown,
},
}}
bg={"#000"}
layout
>
<AnimatePresence>
<MotionBox
key={`text-desc-${currentText[0]}-${currentText.length}`}
className={"abs"}
as={"p"}
color={"#fff"}
layout={"position"}
initial={{
opacity: 0,
y: 20,
paddingRight: 20
}}
animate={{
opacity: 1,
y: 0,
maxHeight: hideText ? "0%" : "100%",
transition: {
delay: 0.2,
duration: 0.5,
ease: SlowDown,
y: {
duration: 0.7,
delay: 0.2,
ease: SlowDown,
}
},
}}
exit={{
opacity: 0,
y: -20,
transition: {
duration: 0.5,
delay: 0,
ease: SlowDown,
}
}}
>
{currentText}
</MotionBox>
</AnimatePresence>
<MotionBox
as={"p"}
layout
initial={{ opacity: 0, y: 20 }}
animate={{
y: 0,
maxHeight: hideText ? "0%" : "100%",
}}
transition={{
delay: currentText?.length ?? 0 < bgText.length ? 0.2 : 0.5,
ease: Forceful,
duration: 1,
y: {
duration: 0.7,
delay: 0.2,
ease: SlowDown,
},
}}
>
{bgText}
</MotionBox>
</MotionBox>
</MotionFlex>
</MotionFlex>;
};
interface IMainBackgroundProps {
url?: string;
unfocused?: boolean;
overrideDelay?: number;
}
const MainBackground: FC<IMainBackgroundProps> = ({ url, unfocused = false, overrideDelay }) => {
return (
<AnimatePresence>
<MotionBox
key={url}
className={joinClasses(bodyStyles["preview-background"], "abs t0 fh z0 overflow-hidden")}
left={"calc((100vh - 176px) * 120 / 592)"}
w={"calc(100vw - (100vh - 176px) * 120 / 592)"}
initial={{ opacity: 0 }}
animate={{
opacity: 1,
filter: unfocused ? "blur(5px)" : "blur(0px)",
}}
exit={{ opacity: 0 }}
transition={{
duration: 0.5,
delay: overrideDelay ?? 0.45,
ease: Forceful,
filter: {
delay: unfocused ? 0.5 : 0,
duration: 0.5,
ease: Forceful,
}
}}
>
<Image
src={url!}
alt={""}
quality={"auto"}
layout={"fill"}
objectFit={"cover"}
style={{
scale: 1
}}
/>
</MotionBox>
</AnimatePresence>
);
};
interface IImagePickerProps {
imageArray: [string, string][];
initialImageIndex: number;
onImageIndexChange?: (newIndex: number) => void;
onImageFocusToggle?: (index: number, willZoom: boolean) => void;
}
export const ImagePicker: FC<IImagePickerProps> = ({
imageArray,
// initialImageIndex,
onImageIndexChange,
onImageFocusToggle,
}) => {
const [inZoomMode, setInZoomMode] = useAtom(InZoomMode);
const [isHovering, setIsHovering] = useState(false);
const [isExiting, setIsExiting] = useState(false);
const [currentImageIndex, setCurrentImageIndex] = useAtom(ImageIndex);
const [currentHoveredIndex, setCurrentHoveredIndex] = useState<Nullable<number>>(null);
const [prevHoveredIndex, setPrevHoveredIndex] = useState<Nullable<number>>(null);
const updateHoverIndex = useCallback((index: Nullable<number>) => {
setCurrentHoveredIndex(prev => {
if (prev === index) return prev;
setPrevHoveredIndex(prev);
return index;
});
}, []);
useEffect(() => {
return setIsExiting(true);
}, []);
return <MotionFlex
className={"fh abs t0 r0 z2 flex-col"}
isolation={"isolate"}
w={"clamp(100px, 20vw, 270px)"}
initial={{ x: "calc(100% + 10px)" }}
exit={{ x: "calc(100% + 10px)" }}
animate={{ x: 0 }}
transition={{
duration: 1,
delay: isExiting ? 0.2 : 1,
when: "beforeChildren",
ease: isExiting ? Forceful : SlowDown
}}
onHoverEnd={() => {
setIsHovering(false);
updateHoverIndex(null);
}}
onHoverStart={() => setIsHovering(true)}
>
<MotionBox
className={"fh abs t0 rfull z0"}
w={"10px"}
animate={inZoomMode || isHovering ? {
opacity: 0.3,
backgroundColor: "#000"
} : {
opacity: 0.4,
backgroundColor: "#fff"
}
}
transition={{
duration: 0.3,
ease: Forceful
}}
/>
{imageArray.map((imageURL, i) =>
<Image2
trackIndex={currentImageIndex}
hoverIndex={currentHoveredIndex}
previousHoverIndex={prevHoveredIndex}
isCurrent={currentImageIndex === i}
key={`gallery-img-${i}`}
inFocus={inZoomMode}
onClick={() => {
setCurrentImageIndex(() => {
onImageIndexChange?.(i);
return i;
});
if (currentImageIndex === i)
{
const flip = !inZoomMode;
setInZoomMode(flip);
onImageFocusToggle?.(i, flip);
}
}}
onHoverCapture={() => updateHoverIndex(i)}
isHoveredOutbound={currentHoveredIndex === i}
src={imageArray[i][1]}
/>
)}
</MotionFlex>;
};
interface IImage2Props {
isCurrent?: boolean;
isHoveredOutbound?: boolean;
inFocus?: boolean;
trackIndex: Nullable<number>;
hoverIndex: Nullable<number>;
previousHoverIndex: Nullable<number>;
onHoverCapture?: (index: Nullable<number>) => void;
preInit?: boolean;
}
export const Image2: FC<ImageProps & IImage2Props> = ({
preInit = false,
trackIndex,
hoverIndex,
inFocus = false,
// this is clonky but bear with me
previousHoverIndex,
isCurrent = false,
isHoveredOutbound = false,
onHoverCapture,
...props
}) => {
const [isHovered, setIsHovered] = useState(false);
const transition = {
duration: 0.5,
ease: SlowDown
};
return <MotionBox
className={joinClasses("fw rel")}
cursor={isCurrent ? (inFocus ? "zoom-out" : "zoom-in") : "pointer"}
animate={{
height: 1,
flexGrow: isCurrent ? 1.8 : (isHovered ? 1.5 : 1),
}}
transition={transition}
onClick={props.onClick}
onHoverStart={() => {
setIsHovered(true);
onHoverCapture?.(trackIndex);
}}
onHoverEnd={() => setIsHovered(false)}
>
<Image
alt=""
className={"fw fh"}
style={{
transition: `all 0.5s cubic-bezier(${SlowDown.toString()})`,
filter: isCurrent ? "brightness(1.2) sepia(0)" : (isHovered ? "brightness(.9) sepia(.3)" : "brightness(.7) sepia(.9)"),
}}
layout={"fill"}
objectFit="cover"
{...{ ...props } as ImageProps & { src: string }}
/>
{isCurrent && <MotionBox
className={"fh abs t0 rfull z1"}
initial={{
width: 10,
backgroundColor: "#FDFD1F",
opacity: trackIndex === null ? 0 : undefined,
}}
animate={{
opacity: trackIndex === null ? 1 : undefined,
}}
layoutId={"thumbnailImage"}
transition={transition}
/>}
<MotionBox
className={"fh abs t0 r0 flex j-flex-center a-flex-center no-pointer"}
initial={{
width: "25%",
x: "100%",
}}
animate={{
x: isHovered && isCurrent && !inFocus ? "0%" : "100%",
background: isHovered ?
"linear-gradient(90deg, rgba(253, 253, 31, 0) 0%, rgba(253, 253, 31, 1) 0%)" :
"linear-gradient(90deg, rgba(253, 253, 31, 0) 0%, rgba(253, 253, 31, 1) 100%)",
}}
transition={{
...transition,
duration: isHovered ? 0.8 : 0.5,
background: {
...transition,
duration: 0.8,
delay: isHovered ? 0.2 : 0,
}
}}
>
<MagnifierIcon
height={100}
width={100}
animate={{
x: 10
}}
transition={{
...transition,
duration: isHovered ? 0.8 : 0.5
}}
/>
</MotionBox>
<AnimatePresence>
{isCurrent && inFocus && <MotionBox
key={`ImageCollapse-${props.src.toString()}`}
className={"fh abs t0 l0 flex j-flex-center a-flex-center no-pointer overflow-hidden"}
initial={{
width: "20%",
clipPath: "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)",
}}
animate={{
clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
background: isHovered ?
"linear-gradient(-90deg, rgba(253, 253, 31, 0) 0%, rgba(253, 253, 31, 1) 0%)" :
"linear-gradient(-90deg, rgba(253, 253, 31, 0) 0%, rgba(253, 253, 31, 1) 100%)",
}}
exit={{
clipPath: "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)",
}}
transition={{
...transition,
duration: 0.5,
background: {
...transition,
duration: 0.8,
delay: isHovered ? 0.2 : 0,
}
}}
>
<motion.svg
transition={{
...transition,
duration: isHovered ? 0.8 : 0.5
}}
initial={{
x: -30
}}
animate={{
x: isHovered ? -10 : -20,
opacity: isHovered ? 1 : .6,
}}
viewBox="56.139 45.667 179.605 179.605"
width="179.605"
height="179.605"
>
<path d="M 145.941 225.272 L 145.941 45.667 L 235.744 135.469 L 145.941 225.272 Z"/>
</motion.svg>
</MotionBox>}
{isHoveredOutbound && !isCurrent && <MotionBox
className={"fh abs t0 rfull z0"}
initial={{
width: 10,
backgroundColor: "#fff",
// mixBlendMode: "exclusion",
opacity: hoverIndex === null ? 0 : undefined,
// x: previousHoverIndex === null ? -50 : undefined,
}}
animate={{
opacity: hoverIndex === null ? 1 : undefined,
// x: hoverIndex === null ? 0 : undefined,
}}
exit={{
opacity: 0,
// x: -50,
}}
layoutId={"hoverImage"}
transition={transition}
/>}
</AnimatePresence>
</MotionBox>;
};
const ImageToolbar = () => {
const [mouseMove, setMouseMove] = useAtom(MouseMoveInZoomMode);
const [mouseTriggerTimeout, setMouseTriggerTimeout] = useAtom(MouseMoveInZoomModeTimeout);
const [forceHover, setForceHover] = useState(false);
const triggerMouse = useCallback(() => {
if (mouseTriggerTimeout) {
clearTimeout(mouseTriggerTimeout);
}
setMouseMove(true);
setMouseTriggerTimeout(setTimeout(() => {
setMouseMove(false);
setMouseTriggerTimeout(null);
}, 5000) as unknown as number);
}, []);
const commonTransition = {
duration: 0.7,
ease: Forceful
};
return <MotionFlex
initial={{
opacity: 0,
}}
animate={{
opacity: mouseMove ? 1 : 0
}}
transition={{
...commonTransition,
delay: mouseMove ? 0 : 1
}}
layout={"position"}
>
<DownloadIcon
hoverAnimation
overrideFG={"#eee"}
animate={{
width: 100,
height: 100,
opacity: .3,
}}
whileHover={{ opacity: 1 }}
transition={commonTransition}
layout={"position"}
/>
<MagnifierIcon
overrideFG={"#eee"}
animate={{
width: 100,
height: 100,
opacity: .3,
}}
whileHover={{ opacity: 1 }}
transition={commonTransition}
layout={"position"}
/>
</MotionFlex>;
};
interface IIconProps {
height?: number;
width?: number;
overrideFG?: string;
}
const MagnifierIcon: FC<IIconProps & MotionProps & { hoverAnimation?: boolean }> = ({ hoverAnimation, overrideFG, ...props }) => {
// const [isHovered, setIsHovered] = useState(false);
const [inImageFullScreenMode, setInImageFullScreenMode] = useAtom(InImageFullScreenMode);
const commonTransition = {
duration: 0.7,
ease: Forceful
};
return <motion.svg
viewBox="27.773 30.899 200.45 200.054"
transition={commonTransition}
onClick={() => setInImageFullScreenMode(!inImageFullScreenMode)}
{...props}
// {...(hoverAnimation ? {
// onHoverStart: () => setIsHovered(true),
// onHoverEnd: () => setIsHovered(false),
// } : {})}
>
<motion.ellipse
stroke={overrideFG ?? "#000"}
fill={"none"}
strokeWidth={21}
cx="140.823" cy="113.291"
rx="61.4" ry="61.392"/>
<path stroke={overrideFG ?? "#000"} fill={overrideFG ?? "#000"} d="M 90.429 147.98 L 104.746 162.298 L 42.091 224.953 L 27.773 210.635 L 90.429 147.98 Z"></path>
</motion.svg>;
};
const DownloadIcon: FC<IIconProps & MotionProps & { hoverAnimation?: boolean }> = ({ hoverAnimation = false, overrideFG, ...props }) => {
const [isHovered, setIsHovered] = useState(false);
const imageData = useAtom(ImageData)[0];
const imageIndex = useAtom(ImageIndex)[0];
const commonTransition = {
duration: 0.7,
ease: Forceful
};
return <motion.svg
viewBox="191.899 73.887 67.067 73.923"
cursor={"pointer"}
transition={commonTransition}
onClick={() => window.open([...imageData.keys()][imageIndex])}
style={{ mixBlendMode: "exclusion" }}
{...props}
{...(hoverAnimation ? {
onHoverStart: () => setIsHovered(true),
onHoverEnd: () => setIsHovered(false),
} : {})}
>
<motion.g
fill={overrideFG ?? "#000"}
transition={commonTransition}
>
<motion.rect
transition={commonTransition}
x="220.568"
animate={{
y: isHovered ? 73.887 + 10 : 73.887 - 2,
height: isHovered ? 55.054 - 10 : 55.054 + 2,
}}
width="9.039"
/>
<motion.path
animate={{
y: isHovered ? 3 : 0,
}}
transition={commonTransition}
d="M 194.003 102.311 L 199.783 96.531 L 230.827 127.576 L 225.048 133.356 L 194.003 102.311 Z M 250.403 96.607 L 256.13 102.334 L 225.151 133.314 L 219.423 127.587 L 250.403 96.607 Z"
/>
</motion.g>
<path fill={overrideFG ?? "#000"} d="M 191.905 120.825 L 200.076 120.825 L 200.076 147.501 L 195.99 147.501 C 193.734 147.501 191.905 145.665 191.905 143.401 L 191.905 120.825 Z M 250.785 120.8 L 258.956 120.8 L 258.956 143.376 C 258.956 145.64 257.127 147.476 254.871 147.476 L 250.785 147.476 L 250.785 120.8 Z M 258.966 139.599 L 258.966 143.685 C 258.966 145.941 257.13 147.771 254.865 147.772 L 195.998 147.81 C 193.734 147.811 191.899 145.984 191.899 143.727 L 191.899 139.641 L 258.966 139.599 Z"></path>
</motion.svg>;
};

44
components/logo/CN/CN-anim.module.scss Normal file
View File

@ -0,0 +1,44 @@
@import '../../../styles/anims';
@keyframes endfield-cn-chr1-main-t-inner-l-translate {
from { transform: translateY(-20px) scaleY(2.5); }
to { transform: translateY(0) scaleY(1); }
}
@keyframes endfield-cn-chr1-main-t-inner-l-path {
from { d: path("M12.2,27H8.8v-3.5l2.5,-3.5h2.3l1.8-2.5,2.7,1.9v3.5Z"); }
to { d: path("M12.2,23.8H8.8v0l2.5-3.5h2.3l1.8-2.5,2.7,1.9v0Z"); }
}
@keyframes endfield-cn-chr1-main-t-inner-r-translate {
from { transform: translateY(0px) scaleY(2.5); }
to { transform: translateY(0) scaleY(1); }
}
@keyframes endfield-cn-chr1-main-t-inner-r-path {
from { d: path("M21.85,16.7l-3.25,-1.7v-3.5h6.2v3.5Z"); }
to { d: path("M21.85,16.7l-3.25,-1.7v0h6.2v0Z"); }
}
@keyframes endfield-cn-chr1-stroke-br-1 {
from { transform: translate(-3px, -2px); }
to { transform: translate(0, 0); }
}
@keyframes endfield-cn-chr1-main-b-path {
from { d: path("M12,37.6v-7.8h2.5l3.285,-2.4l10.3,7l3.85,2.7v0.52h-7.46l-7.88,-5.59v5.6Z") }
to { d: path("M12,37.6v-7.8h2.5l3.285,-2.4l10.3,7l3.85,-2.68v5.77h-7.46l-7.88,-5.59v5.6Z") }
}
@keyframes endfield-cn-chr2-transform {
from { stroke: white; fill: hsla(0, 0, 0, 0); }
to { stroke: transparent; fill: white; }
}
@keyframes endfield-cn-chr3-1-slide {
from { transform: translateY(8px) }
to { transform: translateY(0) }
}
@keyframes endfield-cn-chr3-2-slide {
from { transform: translateY(4.5px) }
to { transform: translateY(0) }
}

260
components/logo/CN/CN-big.module.scss Normal file
View File

@ -0,0 +1,260 @@
@import 'styles/anims';
@import './CN-anim.module.scss';
$logo-anim-delay: 0s;
.logo {
width: clamp(700px, 100%, 2000px);
height: clamp(400px, 100%, 1000px);
path, #en-square {
fill: #fff;
}
path[data-inverse] {
fill: #000;
}
*[char-outline] {
stroke: #fff;
stroke-width: 0;
}
#rect-inverse {
mix-blend-mode: exclusion;
clip-path: polygon(0 100%, 0 100%, 100% 100%, 100% 100%);
}
&:not([data-noanim])
{
//#region CN-"Arknights"
$arknights-cn-anim-delay: calc(#{$logo-anim-delay} + 0s);
.arknights-cn {
opacity: 0;
transform: translateY(-10px);
$delay: calc(
applyPlaybackSpeed(#{$arknights-cn-anim-delay}) +
applyPlaybackSpeed(0.05s) * var(--order)
);
animation:
opacity_spawn
applyPlaybackSpeed(0.5s) #{$delay} steps(1) forwards,
slide_UD
applyPlaybackSpeed(0.8s) #{$delay} $forceful forwards;
}
//#endregion
//#region CN-"Endfield"
.endfield-cn { opacity: 0; }
$endfield-cn-chr1-delay: calc(#{$logo-anim-delay} + 0.8s);
#endfield-cn-chr1-stroke-tl-1 {
transform: translateX(-10px);
animation:
opacity_spawn
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(#{$endfield-cn-chr1-delay}) steps(1) forwards,
slide_LR
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(#{$endfield-cn-chr1-delay})
$forceful forwards;
}
#endfield-cn-chr1-main-t {
transform: translateY(-10px);
$delay: calc(#{$endfield-cn-chr1-delay} + 0.1s);
animation:
opacity_spawn
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(#{$delay})
steps(1) forwards,
slide_DU
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(#{$delay})
$forceful forwards;
}
#endfield-cn-chr1-main-t-inner-l {
transform: translateY(10px) scaleY(1.4);
d: path("M12.2,27H8.8v-3.5l2.5,-3.5h2.3l1.8-2.5,2.7,1.9v3.5Z");
$delay: calc(#{$endfield-cn-chr1-delay} + 0.15s);
animation:
opacity_spawn
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(#{$delay})
steps(1) forwards,
endfield-cn-chr1-main-t-inner-l-translate
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(calc(#{$delay} + 0.1s))
$slow-down forwards,
endfield-cn-chr1-main-t-inner-l-path
applyPlaybackSpeed(0.8s)
applyPlaybackSpeed(calc(#{$delay} + 0.1s))
$slow-down forwards;
}
#endfield-cn-chr1-main-t-inner-r {
transform: translateY(10px) scaleY(1.4);
d: path("M21.85,16.7l-3.25,-1.7v-3.5h6.2Zv3.5");
$delay: calc(#{$endfield-cn-chr1-delay} + 0.15s);
animation:
opacity_spawn
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(#{$delay})
steps(1) forwards,
endfield-cn-chr1-main-t-inner-r-translate
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(calc(#{$delay} + 0.1s))
$slow-down forwards,
endfield-cn-chr1-main-t-inner-r-path
applyPlaybackSpeed(0.8s)
applyPlaybackSpeed(calc(#{$delay} + 0.1s))
$slow-down forwards;
}
#endfield-cn-chr1-stroke-bl-1 {
$delay: calc(#{$endfield-cn-chr1-delay} + 0.3s);
animation:
opacity_spawn
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(#{$delay})
steps(1) forwards,
slide_DU
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(#{$delay})
$forceful forwards;
}
#endfield-cn-chr1-stroke-bl-2 {
$delay: calc(#{$endfield-cn-chr1-delay} + 0.35s);
animation:
opacity_spawn
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(#{$delay})
steps(1) forwards,
slide_DU
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(#{$delay})
$forceful forwards;
}
#endfield-cn-chr1-main-b {
d: path("M12,37.6v-7.8h2.5l3.285,-2.4l10.3,7l3.85,2.7v0.5h-7.46l-7.88,-5.59v5.6Z");
$delay: calc(#{$endfield-cn-chr1-delay} + 0.45s);
animation:
opacity_spawn
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(#{$delay})
steps(1) forwards,
slide_LR
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(#{$delay})
$forceful forwards,
endfield-cn-chr1-main-b-path
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(calc(#{$delay} + 0.4s))
$forceful forwards,
}
#endfield-cn-chr1-stroke-br-1 {
$delay: calc(#{$endfield-cn-chr1-delay} + 0.52s);
animation:
opacity_spawn
applyPlaybackSpeed(0.3s) applyPlaybackSpeed(#{$delay}) steps(1) forwards,
endfield-cn-chr1-stroke-br-1
applyPlaybackSpeed(0.5s) applyPlaybackSpeed(#{$delay}) $forceful forwards;
}
$endfield-cn-chr2-delay: calc(#{$logo-anim-delay} + 1.5s);
#endfield-cn-chr2 {
transform-origin: left;
// transform: scaleX(1.3) translateX(0.4px);
animation:
opacity_spawn
applyPlaybackSpeed(0.4s) applyPlaybackSpeed(#{$endfield-cn-chr2-delay}) steps(1) forwards,
endfield-cn-chr2-transform
applyPlaybackSpeed(0.7s) applyPlaybackSpeed(#{$endfield-cn-chr2-delay}) $forceful forwards;
}
$endfield-cn-chr3-delay: calc(#{$logo-anim-delay} + 2.3s);
#endfield-cn-chr3-1 {
opacity: 1;
transform: translateY(8px);
$delay: calc(#{$endfield-cn-chr3-delay} + 0.1s);
animation:
endfield-cn-chr3-1-slide
applyPlaybackSpeed(0.8s)
applyPlaybackSpeed(#{$delay})
$slow-down forwards;
}
#endfield-cn-chr3-2 {
opacity: 1;
transform: translateY(4.5px);
$delay: calc(#{$endfield-cn-chr3-delay} + 0.13s);
animation:
endfield-cn-chr3-2-slide
applyPlaybackSpeed(0.8s)
applyPlaybackSpeed(#{$delay})
$slow-down forwards;
}
#endfield-cn-chr3 {
clip-path: polygon(0 100%, 0 100%, 100% 100%, 100% 100%);
$delay: calc(#{$endfield-cn-chr3-delay} + 0.1s);
animation:
expand_DU
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(#{$delay})
$forceful forwards,
}
#rect-inverse {
$delay: calc(#{$endfield-cn-chr3-delay} + 0.1s);
animation:
expand_DU
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(#{$delay})
$forceful forwards,
collapse_DU
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(calc(#{$delay} + 0.8s))
$slow-down forwards,
}
//#endregion
//#region EN
#en-square {
$delay: applyPlaybackSpeed(3.2s);
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
animation:
expand_LR
applyPlaybackSpeed(0.5s) #{$delay} $forceful forwards,
}
$en-arknights-anim-delay: 3.2s;
.arknights {
opacity: 0;
transform: translateY(10px);
// applyPlaybackSpeed(0.02s) * var(--order)
$delay: calc(
applyPlaybackSpeed(#{$en-arknights-anim-delay})
);
animation:
opacity_spawn
applyPlaybackSpeed(0.5s) #{$delay} steps(1) forwards,
slide_DU
applyPlaybackSpeed(0.8s) #{$delay} $forceful forwards;
}
// $en-endfield-anim-delay: 3.4s;
$en-endfield-anim-delay: 3.35s;
.endfield {
opacity: 0;
transform: translateY(10px);
// applyPlaybackSpeed(0.02s) * var(--order)
$delay: calc(
applyPlaybackSpeed(#{$en-endfield-anim-delay})
);
animation:
opacity_spawn
applyPlaybackSpeed(0.5s) #{$delay} steps(1) forwards,
slide_DU
applyPlaybackSpeed(0.7s) #{$delay} $forceful forwards;
}
//#endregion
}
}

83
components/logo/CN/CN-big.tsx Normal file
View File

@ -0,0 +1,83 @@
import {HasAnimation, joinClasses, whichWider} from "@utils/common";
import {FC, useEffect, useRef, useState} from "react";
import { motion } from "framer-motion";
import { Forceful } from "@utils/anims";
import styles from "./CN-big.module.scss";
export const LogoLarge_CN: FC<HasAnimation> = ({dontAnimateChild}) => {
const mode = useRef("fh");
const [isExiting, setIsExiting] = useState(false);
useEffect(() => {
mode.current = whichWider() === "width" ? "fw" : "fh";
}, []);
return (
<motion.svg
initial={{ opacity: 0 }}
animate={{
opacity: 1,
y: 0
}}
exit={{
opacity: 0,
y: dontAnimateChild ? 0 : 20,
}}
transition={{
duration: isExiting ? 0.5 : 0.3,
ease: Forceful
}}
data-logo={""}
data-noanim={dontAnimateChild}
className={joinClasses(styles.logo, mode.current, "abs")}
viewBox="-90 -55 242.8 181"
xmlns="http://www.w3.org/2000/svg"
>
<path className={joinClasses(styles["arknights-cn"], "_0")} id={styles["arknights-cn-chr1-1"]} d="M2.5,4.6H4V.5H1.6V5.2h.9Zm0-3.3h.6v.8H2.5Zm0,1.6h.6v.8H2.5Z"/>
<path className={joinClasses(styles["arknights-cn"], "_0")} id={styles["arknights-cn-chr1-2"]} d="M3.4,5.9l.8.6A3.9,3.9,0,0,0,5.3,4.4H6.5v1h-1a3.8,3.8,0,0,1,.3,1l1.3-.2c.3-.2.4-.4.4-.9V.4h-3V2.8A3.8,3.8,0,0,1,3.4,5.9m2-4.6H6.5v.6H5.4Zm0,1.5H6.5v.7H5.4V2.8"/>
<path className={joinClasses(styles["arknights-cn"], "_1")} id={styles["arknights-cn-chr2"]} d="M9.1,5.9h2.8v.5h1V.5H8.1V6.4h1Zm0-4.4h2.8V2.7H9.1Zm0,2.2h2.8V5H9.1Z"/>
<path className={joinClasses(styles["arknights-cn"], "_2")} id={styles["arknights-cn-chr3"]} d="M13.4,5.7a2.7,2.7,0,0,1,.7.8A3.8,3.8,0,0,0,16,3.7h2c-.1,1-.2,1.6-.4,1.7H16.1a2.1,2.1,0,0,1,.4,1h1.1a1.5,1.5,0,0,0,.9-.4A6.9,6.9,0,0,0,19,3.2V2.8H16.1a2,2,0,0,0,.1-.7h3.4v-1H16.9l.4-.2L16.8,0l-.9.4.3.7H13.5v1h1.6a3.7,3.7,0,0,1-1.7,3.6"/>
<path className={joinClasses(styles["arknights-cn"], "_3")} id={styles["arknights-cn-chr4"]} d="M19.5,3.9h.8a2.6,2.6,0,0,1-1,1.9,1.9,1.9,0,0,1,.8.7,3.9,3.9,0,0,0,1.2-2.6h2.5V5.4H23a9.4,9.4,0,0,0,.3.9h1.1c.3-.2.4-.4.4-.9V3.9h.8V3h-.8V.9h-2a2.5,2.5,0,0,0,.4-.7H22a3.1,3.1,0,0,1-.2.8H20.4v2h-.9Zm4.3-2.2V3h-1l.5-.5-.9-.8Zm-2.4,1V1.7h.9l-.6.5.9.8H21.4Zm0.3,1.5a4.8,4.8,0,0,1,1.1.9l.6-.6A3.1,3.1,0,0,0,22.3,4Z"/>
<path className={joinClasses(styles["endfield-cn"], styles["chr1"])} id={styles["endfield-cn-chr1-main-t"]} d="M12,14.8v-1.3h-2.1L1.2,24.9v3.7H13.1L22,22.4l10.1,6.9V23.9l-6.3-4.2,5.6-3.8V10.4h-10.5l2,-2.6h-5.6Z"/>
<path className={joinClasses(styles["endfield-cn"], styles["chr1"])} id={styles["endfield-cn-chr1-main-t-inner-l"]} data-inverse={""} d="M12.2,23.8H8.8l2.5-3.5h2.3l1.8-2.5,2.7,1.9Z"/>
<path className={joinClasses(styles["endfield-cn"], styles["chr1"])} id={styles["endfield-cn-chr1-main-t-inner-r"]} data-inverse={""} d="M21.85,16.7l-3.25,-1.7h6.2Z"/>
<path className={joinClasses(styles["endfield-cn"], styles["chr1"])} id={styles["endfield-cn-chr1-main-b"]} d="M12,37.6v-7.8h2.5l3.285,-2.4l10.3,7l3.85,-2.68v5.75h-7.46l-7.88,-5.59v5.6Z"/>
<path className={joinClasses(styles["endfield-cn"], styles["chr1"])} id={styles["endfield-cn-chr1-stroke-tl-1"]} d="M12.4,7.8h-6L1.3,14.6v6.1H2.7Z"/>
<path className={joinClasses(styles["endfield-cn"], styles["chr1"])} id={styles["endfield-cn-chr1-stroke-bl-1"]} d="M5.7,29.8H1.1v7.8H5.7Z"/>
<path className={joinClasses(styles["endfield-cn"], styles["chr1"])} id={styles["endfield-cn-chr1-stroke-bl-2"]} d="M11.3,29.8H6.6v7.8h4.6Z"/>
<path className={joinClasses(styles["endfield-cn"], styles["chr1"])} id={styles["endfield-cn-chr1-stroke-br-1"]} d="M22.2,23.7l-3.8,2.9,9.2,6.5V27.4Z"/>
<path className={joinClasses(styles["endfield-cn"])} id={styles["endfield-cn-chr2"]} d="M31.3,10.4h12.705v-2.8h5.69v2.8h12.705v4.6h-12.705v2.9h9.8v4.6h-9.8v.9l12.5,8.65v5.8l-12.5,-8.9v8.8h-5.69v-8.69l-12.2,8.53v-5.75l12.2,-8.45v-.9h-9.8v-4.6h9.8v-2.9h-12.705"/>
<g className={styles["endfiled-cn chr3"]} id={styles["endfield-cn-chr3"]}>
<path className={styles["endfield-cn"]} id={styles["endfield-cn-chr3-1"]} d="M11.2,45H8.3V39.2H3.1V45H.7v4.6H3.1V58L0,59.1v6.5l11.2-4.1V55L8.3,56.1V49.6H11.2Z"/>
<path className={styles["endfield-cn"]} id={styles["endfield-cn-chr3-2"]} d="M9.8,49.6v5.3l2.6-1V65.4l4.5,2.3H32.1V63H17.8V51.9l1.2-.5V61.9l5.2-2.2V49.4l1.4-.5V59.2l5.2-2.1V41.3l-6.6,2.5V37.7H18.9v8.1l-1.2.5V41H12.4v7.3Z"/>
</g>
<rect className={styles["cover"]} x="0" y="67.75" width="32.1" height="30.1"/>
<rect id={styles["rect-inverse"]} fill="white" x="0" y="37.75" width="32" height="30"/>
<rect id={styles["en-square"]} x="32" y="37.6" width="30.45" height="30.1"/>
<path className={joinClasses(styles["arknights"], "_0")} id={styles["arknights-a"]} data-inverse={""} d="M35.3,58.3h.7l1.3,3.2h-.8l-.2-.5H35.2l-.2.5h-.8Z"/>
<path className={joinClasses(styles["arknights"], "_0")} id={styles["arknights-a-inner"]} d="M35.32,60.3l.4,-1.2l.45,1.2Z"/>
<path className={joinClasses(styles["arknights"], "_1")} id={styles["arknights-r"]} data-inverse={""} d="M37.6,58.3h1.2c.8,0,1.3.4,1.3,1.1a1,1,0,0,1-.6.9l.7,1.2h-.8l-.6-1h-.4v1h-.8Z"/>
<path className={joinClasses(styles["arknights"], "_1")} id={styles["arknights-r-inner"]} d="M39.3,59.4a.4.4,0,0,0-.4-.4h-.5v.8h.5a.4.4,0,0,0,.4-.4Z"/>
<path className={joinClasses(styles["arknights"], "_2")} id={styles["arknights-k"]} data-inverse={""} d="M41.35,60.4v1.1h-.8V58.3h.8v1.2h0l.4-.5.8-.7h1l-1.4,1.3,1.4,1.9h-.9l-1-1.3Z"/>
<path className={joinClasses(styles["arknights"], "_3")} id={styles["arknights-n"]} data-inverse={""} d="M43.8,58.3h.7l.7.9.7,1h.1a8.4,8.4,0,0,1-.1-1.2v-.7h.8v3.2h-.7l-.7-.9-.7-1h0v1.9h-.8Z"/>
<path className={joinClasses(styles["arknights"], "_4")} id={styles["arknights-i"]} data-inverse={""} d="M47.1,58.3h.8v3.2h-.8Z"/>
<path className={joinClasses(styles["arknights"], "_5")} id={styles["arknights-g"]} data-inverse={""} d="M48.22,59.9a1.6,1.6,0,0,1,1.7-1.7,1.5,1.5,0,0,1,1.4.9l-.8.2a.7.7,0,0,0-.6-.3.9.9,0,0,0,0,1.8c.5,0,.8-.2.8-.5h-.8v-.6h1.5v1.8h-.7v-.2h0c-.1.2-.5.3-.8.3a1.6,1.6,0,0,1-1.7-1.7"/>
<path className={joinClasses(styles["arknights"], "_6")} id={styles["arknights-h"]} data-inverse={""} d="M53.8,59.5V58.3h.8v3.2h-.8V60.3H52.6v1.2h-.8V58.3h.8v1.2Z"/>
<path className={joinClasses(styles["arknights"], "_7")} id={styles["arknights-t"]} data-inverse={""} d="M56.5,61.5h-.7V59h-1v-.7h2.7V59h-1Z"/>
<path className={joinClasses(styles["arknights"], "_8")} id={styles["arknights-s"]} data-inverse={""} d="M58.42,60.1a1,1,0,0,1-.8-.9,1.1,1.1,0,0,1,1.2-1,1.2,1.2,0,0,1,1.2.9l-.7.2a.5.5,0,0,0-.6-.4c-.2,0-.3.1-.3.2s.3.3.7.5,1,.4,1,1-.5,1-1.3,1a1.4,1.4,0,0,1-1.4-1l.8-.2c.1.2.3.5.6.5s.4-.1.4-.3-.3-.3-.8-.5"/>
<path className={joinClasses(styles["endfield"], "_0")} id={styles["endfield-e-1"]} data-inverse={""} d="M37,66.1H34.1V62.3H37v.8H35.1v.7h1.4v.8H35.1v.7H37Z"/>
<path className={joinClasses(styles["endfield"], "_1")} id={styles["endfield-n"]} data-inverse={""} d="M41,66.1h-.9l-.8-1-.8-1.3h0c-.1,0,0,.6,0,1.5v.8h-1V62.3h.9l.8,1.1.9,1.1h0V62.3H41Z"/>
<path className={joinClasses(styles["endfield"], "_2")} id={styles["endfield-d-1"]} data-inverse={""} d="M46.9,66.1H41.6V62.3h1.7a1.9,1.9,0,0,1,2,1.9,1.9,1.9,0,0,1-2,1.9"/>
<path className={joinClasses(styles["endfield"], "_2")} id={styles["endfield-d-2-inner"]} d="M43.3,63.1h-.8v2.2h.8a1,1,0,0,0,1-1.1,1.1,1.1,0,0,0-1-1.1"/>
<path className={joinClasses(styles["endfield"], "_3")} id={styles["endfield-f"]} data-inverse={""} d="M48.2,63.1H46.5v.8h1.4v.8H46.5v1.4h-.9V62.3h2.7Z"/>
<path className={joinClasses(styles["endfield"], "_4")} id={styles["endfield-i"]} data-inverse={""} d="M49.65,66.1h-.9V62.3h.9Z"/>
<path className={joinClasses(styles["endfield"], "_5")} id={styles["endfield-e-2"]} data-inverse={""} d="M53,66.1H50.2V62.3H53v.8H51.1v.7h1.5v.8H51.1v.7H53Z"/>
<path className={joinClasses(styles["endfield"], "_6")} id={styles["endfield-l"]} data-inverse={""} d="M56.3,66.1H53.6V62.3h.9v3h1.8Z"/>
<path className={joinClasses(styles["endfield"], "_7")} id={styles["endfield-d-2"]} data-inverse={""} d="M61.1,66.1H56.6V62.3h1.7a1.9,1.9,0,0,1,2,1.9,1.9,1.9,0,0,1-2,1.9"/>
<path className={joinClasses(styles["endfield"], "_7")} id={styles["endfield-d-2-inner"]} d="M58.3,63.1h-.8v2.2h.8a1,1,0,0,0,1-1.1,1.1,1.1,0,0,0-1-1.1"/>
</motion.svg>
);
};

394
components/logo/CN/CN-big.v2.module.scss Normal file
View File

@ -0,0 +1,394 @@
@import 'styles/anims';
$logo-anim-delay: 0s;
.logo {
width: clamp(700px, 100%, 2000px);
height: clamp(400px, 100%, 1000px);
path, rect, .en-square {
fill: #fff;
}
*[data-inverse] {
fill: #000;
}
*[char-outline] {
stroke: #fff;
stroke-width: 0;
}
.main-t, .main-b, .char-2 {
stroke-width: 0.15px;
stroke: #fff
}
#en g {
mix-blend-mode: exclusion;
}
&[data-noanim] {
.cover, .cover-char-3, #inverse {
opacity: 0;
}
}
&:not([data-noanim]) {
$endfield-cn-chr3-delay: calc(#{$logo-anim-delay} + 2.3s);
#cn {
$arknights-cn-anim-delay: calc(#{$logo-anim-delay} + 0s);
.arknights path {
opacity: 0;
transform: translateY(-10px);
$delay: calc(
#{applyPlaybackSpeed(#{$arknights-cn-anim-delay})} +
#{applyPlaybackSpeed(0.05s)} * var(--order)
);
animation:
opacity_spawn
applyPlaybackSpeed(0.5s)
#{$delay} steps(1) forwards,
slide_UD
applyPlaybackSpeed(0.8s)
#{$delay} $forceful forwards;
}
.endfield {
g {
path, rect { opacity: 0; }
}
$endfield-cn-chr1-delay: calc(#{$logo-anim-delay} + 0.8s);
.char-1 {
#stroke-tl-1 {
animation:
opacity_spawn
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(#{$endfield-cn-chr1-delay})
steps(1) forwards,
slide_LR
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(#{$endfield-cn-chr1-delay})
$forceful forwards;
}
#main-t {
$delay: calc(#{$endfield-cn-chr1-delay} + 0.1s);
animation:
opacity_spawn
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(#{$delay})
steps(1) forwards,
slide_DU
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(#{$delay})
$forceful forwards;
}
#main-t-inner-l {
$delay: calc(#{$endfield-cn-chr1-delay} + 0.15s);
// M12.5 31.767 L9.1 31.767 L11.6 26.388 L13.9 26.388 L15.7 23.888 L18.4 27.667 L12.5 31.767Z
// M12.5 29.888 L9.1 29.888 L11.6 26.388 L13.9 26.388 L15.7 23.888 L18.4 25.788 L12.5 29.888Z
// M12.5 29.888 H9.10 L11.6 26.388 H13.9 L15.7 23.888 L18.4 25.788 L12.5 29.888Z
@keyframes main-t-inner-l_path {
from { d: path("M12.5,31.767l-3.4,0l2.5,-5.379l2.3,0l1.8,-2.5l2.7,3.779l-5.9,4.1z"); }
to { d: path("M12.5,29.8879l-3.4,0l2.5,-3.5l2.3,0l1.8,-2.5l2.7,1.9l-5.9,4.1z"); }
}
@keyframes main-t-inner-l_translate {
from { transform: translateY(-20px) scaleY(2.5); }
to { transform: translateY(0) scaleY(1); }
}
animation:
opacity_spawn
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(#{$delay})
steps(1) forwards,
main-t-inner-l_translate
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(calc(#{$delay} + 0.1s))
$slow-down forwards,
main-t-inner-l_path
applyPlaybackSpeed(0.8s)
applyPlaybackSpeed(calc(#{$delay} + 0.1s))
$slow-down forwards;
}
#main-t-inner-r {
$delay: calc(#{$endfield-cn-chr1-delay} + 0.15s);
@keyframes main-t-inner-r_translate {
from { transform: translateY(0px) scaleY(2.5); }
to { transform: translateY(0) scaleY(1); }
}
// M22.053 26.821 L18.9 21.088 H25.1 L22.053 26.821Z
// M21.95 22.788 L18.9 21.088 H25.1 L21.95 22.788Z
@keyframes main-t-inner-r_path {
from { d: path("M22.053,26.821l-3.153,-5.733h6.2l-3.047,5.733z"); }
to { d: path("M21.95,22.788l-3.05,-1.7h6.2l-3.15,1.7z"); }
}
animation:
opacity_spawn
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(#{$delay}) steps(1) forwards,
main-t-inner-r_translate
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(calc(#{$delay} + 0.1s)) $slow-down forwards,
main-t-inner-r_path
applyPlaybackSpeed(0.8s)
applyPlaybackSpeed(calc(#{$delay} + 0.1s)) $slow-down forwards;
}
#stroke-bl-1 {
$delay: calc(#{$endfield-cn-chr1-delay} + 0.3s);
animation:
opacity_spawn
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(#{$delay}) steps(1) forwards,
slide_DU
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(#{$delay}) $forceful forwards;
}
#stroke-bl-2 {
$delay: calc(#{$endfield-cn-chr1-delay} + 0.35s);
animation:
opacity_spawn
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(#{$delay}) steps(1) forwards,
slide_DU
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(#{$delay}) $forceful forwards;
}
#main-b {
$delay: calc(#{$endfield-cn-chr1-delay} + 0.45s);
// M12,37.6 V29.8 H14.5 L17.785,27.4 L27.614,34.635 L31.805,37.6 L24.385,37.6 L16.505,32.01 L16.505,37.61 V37.61Z
// M12,37.6 V29.8 H14.5 L17.785,27.4 L28.085,34.4 L31.805,31.85 L31.805,37.6 L24.385,37.6 L16.505,32.01 V37.61Z
// M12.3 43.688 L 12.3 35.888 L 14.8 35.888 L18.085 33.488 L28.259 40.74 L32.136 43.622 L32.105 43.652 L24.671 43.652 L16.805 38.098 L16.805 43.698Z
// M12.3 43.688 L 12.3 35.888 L 14.8 35.888 L18.085 33.488 L28.385 40.488L32.105 37.86 L32.105 43.6523 L24.6714 43.6523 L16.805 38.098 L16.805 43.698Z
d: path("M12.3 43.688 L 12.3 35.888 L 14.8 35.888 L18.085 33.488 L28.259 40.74 L32.136 43.622 L32.105 43.652 L24.671 43.652 L16.805 38.098 L16.805 43.698Z");
@keyframes main-b_path {
from { d: path("M12.3 43.688 L 12.3 35.888 L 14.8 35.888 L18.085 33.488 L28.259 40.74 L32.136 43.622 L32.105 43.652 L24.671 43.652 L16.805 38.098 L16.805 43.698Z"); }
to { d: path("M12.3 43.688 L 12.3 35.888 L 14.8 35.888 L18.085 33.488 L28.385 40.488L32.105 37.86 L32.105 43.6523 L24.6714 43.6523 L16.805 38.098 L16.805 43.698Z"); }
}
animation:
opacity_spawn
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(#{$delay}) steps(1) forwards,
slide_LR
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(#{$delay}) $forceful forwards,
main-b_path
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(calc(#{$delay} + 0.4s)) $forceful forwards,
}
#stroke-br-1 {
$delay: calc(#{$endfield-cn-chr1-delay} + 0.52s);
@keyframes stroke-br-1_translate {
from { transform: translate(-3px, -2px); }
to { transform: translate(0, 0); }
}
animation:
opacity_spawn
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(#{$delay}) steps(1) forwards,
stroke-br-1_translate
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(#{$delay}) $forceful forwards;
}
}
$endfield-cn-chr2-delay: calc(#{$endfield-cn-chr1-delay} - 0.2s);
.char-2 {
.corner-o {
transform-origin: 150px 84px;
transform: scale(1.2);
@keyframes chr2-cO {
from {
transform: scale(1.2);
transform-origin: 150px 84px;
}
60% {
opacity: 1;
}
80% {
transform: scale(1.05);
transform-origin: 348px 278px;
}
to { opacity: 0; }
}
animation:
chr2-cO
applyPlaybackSpeed(1.5s)
applyPlaybackSpeed(#{$endfield-cn-chr2-delay})
steps(1) forwards;
}
.corner-i {
opacity: 1;
@keyframes chr2-cI {
from { opacity: 0; }
50% { opacity: 1; }
60% { opacity: 0; }
90% { opacity: 1; }
to { opacity: 0; }
}
animation:
chr2-cI
applyPlaybackSpeed(1.5s)
applyPlaybackSpeed(#{$endfield-cn-chr2-delay})
steps(1) forwards;
}
.main {
@keyframes chr2-main {
from {}
50% {
opacity: 1;
clip-path: polygon(0 70%, 30% 70%, 30% 100%, 0 100%);
}
75% {
clip-path: polygon(5% 60%, 40% 60%, 40% 85%, 5% 85%);
}
90% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
to { opacity: 1 }
}
animation:
chr2-main
applyPlaybackSpeed(1.5s)
applyPlaybackSpeed(#{$endfield-cn-chr2-delay})
steps(1) forwards;
}
.fragment-l {
clip-path: polygon(0 0, 45% 0, 45% 45%, 0 45%);
transform: translate(0, 0);
@keyframes chr2-fL {
20% { opacity: 1; }
40% { transform: translate(0, -8px) }
80% { transform: translate(0, 0) }
}
animation:
chr2-fL
applyPlaybackSpeed(1.5s)
applyPlaybackSpeed(#{$endfield-cn-chr2-delay})
steps(1) forwards;
}
.fragment-r {
clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);
@keyframes chr2-fR {
30% {
opacity: 1;
}
50% {
clip-path: polygon(50% 0%, 100% 0%, 100% 40%, 50% 40%);
}
70% {
clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);
}
to {
}
}
animation:
chr2-fR
applyPlaybackSpeed(1.5s)
applyPlaybackSpeed(#{$endfield-cn-chr2-delay})
steps(1) forwards;
}
}
}
.char-3 {
.l {
opacity: 1;
transform: translateY(8px);
$delay: calc(#{$endfield-cn-chr3-delay} + 0.1s);
@keyframes chr3-l-slide {
from { transform: translateY(8px) }
to { transform: translateY(0) }
}
animation:
chr3-l-slide
applyPlaybackSpeed(0.8s)
applyPlaybackSpeed(#{$delay})
$slow-down forwards;
}
.r {
opacity: 1;
transform: translateY(4.5px);
$delay: calc(#{$endfield-cn-chr3-delay} + 0.13s);
@keyframes chr3-r-slide {
from { transform: translateY(4.5px) }
to { transform: translateY(0) }
}
animation:
chr3-r-slide
applyPlaybackSpeed(0.8s)
applyPlaybackSpeed(#{$delay})
$slow-down forwards;
}
}
}
#en {
$en-arknights-anim-delay: 3.2s;
.arknights path {
opacity: 0;
transform: translateY(10px);
// applyPlaybackSpeed(0.02s) * var(--order)
$delay: calc(#{applyPlaybackSpeed(#{$en-arknights-anim-delay})});
animation:
opacity_spawn
#{applyPlaybackSpeed(0.5s)}
#{$delay} steps(1) forwards,
slide_DU
#{applyPlaybackSpeed(0.8s)}
#{$delay} $forceful forwards;
}
// $en-endfield-anim-delay: 3.4s;
$en-endfield-anim-delay: 3.35s;
.endfield path {
opacity: 0;
transform: translateY(10px);
// applyPlaybackSpeed(0.02s) * var(--order)
$delay: calc(
#{applyPlaybackSpeed(#{$en-endfield-anim-delay})}
);
animation:
opacity_spawn
#{applyPlaybackSpeed(0.5s)}
#{$delay} steps(1) forwards,
slide_DU
#{applyPlaybackSpeed(0.7s)}
#{$delay} $forceful forwards;
}
}
#inverse {
mix-blend-mode: exclusion;
clip-path: polygon(0 100%, 0 100%, 100% 100%, 100% 100%);
$delay: calc(#{$endfield-cn-chr3-delay} + 0.1s);
animation:
expand_DU
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(#{$delay})
$forceful forwards,
collapse_DU
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(calc(#{$delay} + 0.8s))
$slow-down forwards,
}
.cover-char-3 {
$delay: calc(#{$endfield-cn-chr3-delay} + 0.1s);
animation:
collapse_DU
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(#{$delay})
$forceful forwards,
}
.cover {
y: 73.38px;
$delay: calc(#{$endfield-cn-chr3-delay} + 0.1s);
@keyframes cover-slide {
from { y: 73.38px }
to { y: 73.82px }
}
animation:
cover-slide
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(#{$delay})
$forceful forwards,
}
.en-square {
$delay: applyPlaybackSpeed(3.2s);
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
animation:
expand_LR
applyPlaybackSpeed(0.5s) #{$delay} $forceful forwards,
}
}
}

100
components/logo/CN/CN-big.v2.tsx Normal file
View File

@ -0,0 +1,100 @@
import {HasAnimation, joinClasses, whichWider} from "@utils/common";
import {FC, useEffect, useRef, useState} from "react";
import { motion } from "framer-motion";
import { Forceful } from "@utils/anims";
import styles from "./CN-big.v2.module.scss";
export const LogoLarge_CN: FC<HasAnimation> = ({dontAnimateChild}) => {
const mode = useRef("fh");
const [isExiting, setIsExiting] = useState(false);
useEffect(() => {
mode.current = whichWider() === "width" ? "fw" : "fh";
}, []);
return (
<motion.svg
initial={{ opacity: 0 }}
animate={{
opacity: 1,
y: 0
}}
exit={{
opacity: 0,
y: dontAnimateChild ? 0 : 20,
}}
transition={{
duration: isExiting ? 0.5 : 0.3,
ease: Forceful
}}
data-logo={""}
data-noanim={dontAnimateChild}
className={joinClasses(styles.logo, mode.current, "abs")}
viewBox="-42 -30 152 148"
xmlns="http://www.w3.org/2000/svg"
>
<g id={styles["cn"]}>
<g className={styles["arknights"]}>
<path className={joinClasses("_0", styles["char-1-1"])} d="M2.8,10.6879h1.5v-4.1h-2.4v4.7h0.9v-0.6zm0,-3.3h0.6v0.8h-0.6v-0.8zm0,1.6h0.6v0.8h-0.6v-0.8z"/>
<path className={joinClasses("_0", styles["char-1-2"])} d="M3.7,11.9879l0.8,0.6c0.576,-0.569,0.96,-1.303,1.1,-2.1h1.2v1h-1c0.146,0.318,0.246,0.655,0.3,1l1.3,-0.2c0.3,-0.2,0.4,-0.4,0.4,-0.9v-4.9h-3v2.4c0.061,0.566,-0.007,1.139,-0.197,1.675c-0.191,0.537,-0.499,1.024,-0.903,1.425m2,-4.6h1.1v0.6h-1.1v-0.6zm0,1.5h1.1v0.7h-1.1v-0.7z"/>
<path className={joinClasses("_1", styles["char-2"])} d="M9.4,11.9879h2.8v0.5h1v-5.9h-4.8v5.9h1v-0.5zm0,-4.4h2.8v1.2h-2.8v-1.2zm0,2.2h2.8v1.3h-2.8v-1.3z"/>
<path className={joinClasses("_2", styles["char-3"])} d="M13.7,11.7879c0.284,0.218,0.522,0.49,0.7,0.8c0.512,-0.288,0.949,-0.691,1.279,-1.177c0.33,-0.486,0.542,-1.041,0.621,-1.623h2c-0.1,1,-0.2,1.6,-0.4,1.7h-1.5c0.218,0.293,0.356,0.638,0.4,1h1.1c0.337,-0.028,0.654,-0.169,0.9,-0.4c0.359,-0.888,0.53,-1.842,0.5,-2.8v-0.4h-2.9c0.075,-0.226,0.109,-0.463,0.1,-0.7h3.4v-1h-2.7l0.4,-0.2l-0.5,-0.9l-0.9,0.4l0.3,0.7h-2.7v1h1.6c0.089,0.7,-0.023,1.41,-0.325,2.048c-0.301,0.638,-0.778,1.176,-1.375,1.552z"/>
<path className={joinClasses("_3", styles["char-4"])} d="M19.8,9.98793h0.8c-0.022,0.37,-0.122,0.73,-0.295,1.058c-0.172,0.328,-0.413,0.615,-0.705,0.842c0.328,0.152,0.605,0.395,0.8,0.7c0.715,-0.683,1.144,-1.613,1.2,-2.6h2.5v1.5h-0.8c0.085,0.305,0.185,0.605,0.3,0.9h1.1c0.3,-0.2,0.4,-0.4,0.4,-0.9v-1.5h0.8v-0.9h-0.8v-2.1h-2c0.17,-0.21,0.305,-0.447,0.4,-0.7h-1.2c-0.031,0.274,-0.098,0.543,-0.2,0.8h-1.4v2h-0.9v0.9zm4.3,-2.2v1.3h-1l0.5,-0.5l-0.9,-0.8h1.4zm-2.4,1v-1h0.9l-0.6,0.5l0.9,0.8h-1.2v-0.3zm0.3,1.5c0.409,0.244,0.78,0.547,1.1,0.9l0.6,-0.6c-0.33,-0.237,-0.704,-0.407,-1.1,-0.5l-0.6,0.2z"/>
</g>
<g className={styles["endfield"]}>
<g className={styles["char-1"]}>
<path id={styles["main-t"]} d="M12.3,20.8879v-1.3h-2.1l-8.7,11.4v3.7h11.9l8.9,-6.2l10.1,6.9v-5.4l-6.3,-4.2l5.5,-3.8v-5.578h-10.391l1.991,-2.522h-5.6l-5.3,7z"/>
<path id={styles["main-t-inner-l"]} d="M12.5,29.8879l-3.4,0l2.5,-3.5l2.3,0l1.8,-2.5l2.7,1.9l-5.9,4.1z" data-inverse=""/>
<path id={styles["main-t-inner-r"]} d="M21.95,22.7879l-3.05,-1.7h6.2l-3.15,1.7z" data-inverse=""/>
<path id={styles["main-b"]} d="M12.3,43.6879v-7.8h2.5l3.285,-2.4l10.3,7l3.72,-2.628v5.792h-7.434l-7.866,-5.554v5.6"/>
<path id={styles["stroke-tl-1"]} d="M12.7,13.8879h-6l-5.1,6.8v6.1h1.4l9.7,-12.9z" stroke="white" strokeWidth="0.15"/>
<path id={styles["stroke-bl-1"]} d="M6,35.8879h-4.6v7.8h4.6v-7.8z" stroke="white" strokeWidth="0.15"/>
<path id={styles["stroke-bl-2"]} d="M11.6,35.8879h-4.7v7.8h4.6l0.1,-7.8z" stroke="white" strokeWidth="0.15"/>
<path id={styles["stroke-br-1"]} d="M22.5,29.7879l-3.8,2.9l9.2,6.5v-5.7l-5.4,-3.7z" stroke="white" strokeWidth="0.15"/>
</g>
<g className={styles["char-2"]}>
<path className={styles["main"]} d="M31.6 16.4161H44.305V13.6161H49.995V16.4161H62.7V21.0161H49.995V23.9161H59.795V28.5161H49.995V29.4161L62.495 38.0661V43.8661L49.995 34.9661V43.6134H44.305V35.0761L32.105 43.6561V37.8561L44.305 29.4061V28.5061H34.505V23.9061H44.305V21.0061H31.6"/>
<path className={styles["fragment-l"]} d="M31.6 16.4161H44.305V13.6161H49.995V16.4161H62.7V21.0161H49.995V23.9161H59.795V28.5161H49.995V29.4161L62.495 38.0661V43.8661L49.995 34.9661V43.6134H44.305V35.0761L32.105 43.6561V37.8561L44.305 29.4061V28.5061H34.505V23.9061H44.305V21.0061H31.6"/>
<path className={styles["fragment-r"]} d="M31.6 16.4161H44.305V13.6161H49.995V16.4161H62.7V21.0161H49.995V23.9161H59.795V28.5161H49.995V29.4161L62.495 38.0661V43.8661L49.995 34.9661V43.6134H44.305V35.0761L32.105 43.6561V37.8561L44.305 29.4061V28.5061H34.505V23.9061H44.305V21.0061H31.6"/>
<rect className={styles["corner-o"]} x="75.9875" y="13.6161" width="13.2875" height="13.147" transform="rotate(-180 75.9875 13.6161)"/>
<rect className={styles["corner-i"]} x="72.4887" y="10.149" width="6.29" height="6.21295" transform="rotate(-180 72.4887 10.149)" stroke="black" strokeWidth="2"/>
</g>
<g className={styles["char-3"]}>
<path className={styles["l"]} d="M11.5 51.0879H8.6V45.2879H3.4V51.0879H1V55.6879H3.4V64.0879L0.300003 65.1879V71.6879L11.5 67.5879V61.0879L8.6 62.1879V55.6879H11.5V51.0879Z" stroke="white" strokeWidth="0.15"/>
<path className={styles["r"]} d="M10.1 55.6879V60.9879L12.7 59.9879V71.4879L17.2 73.7879H32.3V69.0879H18V57.9879L19.2 57.4879V67.9879L24.4 65.7879V55.4879L25.8 54.9879V65.2879L31 63.1879V47.3879L24.4 49.8879V43.7879H19.2V51.8879L18 52.3879V47.0879H12.7V54.3879L11.5 54.8879" stroke="white" strokeWidth="0.15"/>
</g>
</g>
</g>
<rect className={styles["cover"]} x="0.13" y="73.4" width="32.34" height="30.1" data-inverse=""/>
<rect className={styles["cover-char-3"]} x="0.13" y="43.7" width="32.34" height="30.1" data-inverse=""/>
<rect id={styles["inverse"]} fill="white" x="0.17" y="43.82" width="32.24" height="30.1"/>
<path className={styles["en-square"]} d="M62.4 43.688H32.3V73.788H62.4V43.688Z" stroke="white" strokeWidth="0.15"/>
<g id={styles["en"]}>
<g className={styles["arknights"]}>
<path className={styles["a"]} d="M35.6 64.388H36.3L37.6 67.588H36.8L36.6 67.088H35.5L35.3 67.588H34.5L35.6 64.388Z"/>
<path className={styles["a-inner"]} d="M35.62 66.588L36.02 65.388L36.47 66.588H35.62Z" data-inverse=""/>
<path className={styles["r"]} d="M37.9 64.388H39.1C39.9 64.388 40.4 64.788 40.4 65.488C40.3968 65.6797 40.3386 65.8665 40.2322 66.0261C40.1258 66.1857 39.9758 66.3113 39.8 66.388L40.5 67.588H39.7L39.1 66.588H38.7V67.588H37.9V64.388Z"/>
<path className={styles["r-inner"]} d="M39.6 65.488C39.6 65.3819 39.5579 65.2801 39.4829 65.2051C39.4078 65.1301 39.3061 65.088 39.2 65.088H38.7V65.888H39.2C39.3061 65.888 39.4078 65.8458 39.4829 65.7708C39.5579 65.6958 39.6 65.5941 39.6 65.488V65.488Z" data-inverse=""/>
<path className={styles["k"]} d="M41.65 66.488V67.588H40.85V64.388H41.65V65.588L42.05 65.088L42.85 64.388H43.85L42.45 65.688L43.85 67.588H42.95L41.95 66.288L41.65 66.488Z"/>
<path className={styles["n"]} d="M44.1 64.388H44.8L45.5 65.288L46.2 66.288H46.3C46.238 65.8909 46.2046 65.4898 46.2 65.088V64.388H47V67.588H46.3L45.6 66.688L44.9 65.688V67.588H44.1V64.388Z"/>
<path className={styles["i"]} d="M47.4 64.388H48.2V67.588H47.4V64.388Z"/>
<path className={styles["g"]} d="M48.52 65.988C48.5053 65.7609 48.5392 65.5333 48.6194 65.3204C48.6997 65.1075 48.8244 64.9141 48.9853 64.7532C49.1462 64.5924 49.3395 64.4676 49.5525 64.3874C49.7654 64.3072 49.9929 64.2733 50.22 64.288C50.5161 64.283 50.8071 64.3658 51.0563 64.526C51.3054 64.6861 51.5016 64.9165 51.62 65.188L50.82 65.388C50.7531 65.2917 50.6631 65.2138 50.5583 65.1614C50.4534 65.109 50.3371 65.0837 50.22 65.088C49.9813 65.088 49.7524 65.1828 49.5836 65.3516C49.4148 65.5203 49.32 65.7493 49.32 65.988C49.32 66.2267 49.4148 66.4556 49.5836 66.6244C49.7524 66.7931 49.9813 66.888 50.22 66.888C50.72 66.888 51.02 66.688 51.02 66.388H50.22V65.788H51.72V67.588H51.02V67.388C50.92 67.588 50.52 67.688 50.22 67.688C49.9929 67.7027 49.7654 67.6688 49.5525 67.5885C49.3395 67.5083 49.1462 67.3836 48.9853 67.2227C48.8244 67.0618 48.6997 66.8684 48.6194 66.6555C48.5392 66.4426 48.5053 66.215 48.52 65.988"/>
<path className={styles["h"]} d="M54.1 65.588V64.388H54.9V67.588H54.1V66.388H52.9V67.588H52.1V64.388H52.9V65.588H54.1Z"/>
<path className={styles["t"]} d="M56.8 67.588H56.1V65.088H55.1V64.388H57.8V65.088H56.8V67.588Z"/>
<path className={styles["s"]} d="M58.72 66.188C58.507 66.1452 58.3137 66.0343 58.1694 65.8719C58.025 65.7095 57.9375 65.5045 57.92 65.288C57.9326 65.1433 57.9736 65.0025 58.0409 64.8738C58.1081 64.7451 58.2001 64.631 58.3117 64.538C58.4232 64.445 58.5521 64.3751 58.6908 64.3322C58.8296 64.2892 58.9754 64.2742 59.12 64.288C59.3925 64.2794 59.6598 64.3638 59.878 64.5274C60.0961 64.691 60.252 64.9239 60.32 65.188L59.62 65.388C59.6081 65.3217 59.583 65.2585 59.5461 65.2022C59.5091 65.1458 59.4612 65.0975 59.4052 65.0602C59.3492 65.0228 59.2862 64.9972 59.22 64.9848C59.1538 64.9724 59.0858 64.9734 59.02 64.988C58.82 64.988 58.72 65.088 58.72 65.188C58.72 65.288 59.02 65.488 59.42 65.688C59.82 65.888 60.42 66.088 60.42 66.688C60.42 67.288 59.92 67.688 59.12 67.688C58.8086 67.7009 58.5019 67.6095 58.2483 67.4284C57.9947 67.2473 57.8088 66.9867 57.72 66.688L58.52 66.488C58.62 66.688 58.82 66.988 59.12 66.988C59.42 66.988 59.52 66.888 59.52 66.688C59.52 66.488 59.22 66.388 58.72 66.188"/>
</g>
<g className={styles["endfield"]}>
<path className={styles["e-1"]} d="M37.3 72.188H34.4V68.388H37.3V69.188H35.4V69.888H36.8V70.688H35.4V71.388H37.3V72.188Z"/>
<path className={styles["n_2"]} d="M41.3 72.188H40.4L39.6 71.188L38.8 69.888C38.7 69.888 38.8 70.488 38.8 71.388V72.188H37.8V68.388H38.7L39.5 69.488L40.4 70.588V68.388H41.3V72.188Z"/>
<path className={styles["d-1"]} d="M43.6 72.188H41.9V68.388H43.6C43.8578 68.3744 44.1157 68.4135 44.3578 68.5028C44.6 68.5922 44.8215 68.73 45.0086 68.9078C45.1958 69.0856 45.3447 69.2997 45.4464 69.537C45.5481 69.7743 45.6004 70.0298 45.6 70.288C45.6004 70.5461 45.5481 70.8016 45.4464 71.0389C45.3447 71.2762 45.1958 71.4903 45.0086 71.6681C44.8215 71.8459 44.6 71.9837 44.3578 72.0731C44.1157 72.1625 43.8578 72.2016 43.6 72.188Z"/>
<path className={styles["d-1-inner"]} d="M43.6 69.188H42.8V71.388H43.6C43.7402 71.3887 43.8789 71.3599 44.0073 71.3035C44.1356 71.2471 44.2506 71.1644 44.3449 71.0606C44.4392 70.9569 44.5107 70.8345 44.5546 70.7014C44.5985 70.5683 44.614 70.4274 44.6 70.288C44.6011 70.0127 44.4991 69.7471 44.3139 69.5435C44.1288 69.3398 43.8741 69.213 43.6 69.188" data-inverse=""/>
<path className={styles["f"]} d="M48.5 69.188H46.8V69.988H48.2V70.788H46.8V72.188H45.9V68.388H48.6L48.5 69.188Z"/>
<path className={styles["i_2"]} d="M49.95 72.188H49.05V68.388H49.95V72.188Z"/>
<path className={styles["e-2"]} d="M53.3 72.188H50.5V68.388H53.3V69.188H51.4V69.888H52.9V70.688H51.4V71.388H53.3V72.188Z"/>
<path className={styles["l_2"]} d="M56.6 72.188H53.9V68.388H54.8V71.388H56.6V72.188Z"/>
<path className={styles["d-2"]} d="M58.6 72.188H56.9V68.388H58.6C58.8578 68.3744 59.1157 68.4135 59.3578 68.5028C59.6 68.5922 59.8215 68.73 60.0086 68.9078C60.1958 69.0856 60.3447 69.2997 60.4464 69.537C60.5481 69.7743 60.6004 70.0298 60.6 70.288C60.6004 70.5461 60.5481 70.8016 60.4464 71.0389C60.3447 71.2762 60.1958 71.4903 60.0086 71.6681C59.8215 71.8459 59.6 71.9837 59.3578 72.0731C59.1157 72.1625 58.8578 72.2016 58.6 72.188Z"/>
<path className={styles["d-2-inner"]} d="M58.6 69.188H57.8V71.388H58.6C58.7402 71.3887 58.8789 71.3599 59.0073 71.3035C59.1356 71.2471 59.2506 71.1644 59.3449 71.0606C59.4392 70.9569 59.5107 70.8345 59.5546 70.7014C59.5985 70.5683 59.614 70.4274 59.6 70.288C59.6011 70.0127 59.4991 69.7471 59.3139 69.5435C59.1288 69.3398 58.8741 69.213 58.6 69.188" data-inverse=""/>
</g>
</g>
</motion.svg>
);
};

94
components/logo/CN/CN-small.module.scss Normal file
View File

@ -0,0 +1,94 @@
@import 'styles/anims';
@import './CN-anim.module.scss';
@import '../logoAnimFunc';
.patch {
fill: #fff;
}
$logo-anim-delay: 0s;
.logo {
path {
fill: #fff;
&[data-inverse] {
fill: #000;
}
}
&:not([data-noanim])
{
//#region CN-"Arknights"
$arknights-cn-anim-delay: calc(#{$logo-anim-delay} + 0s);
.arknights-cn {
opacity: 0;
transform: translateY(-10px);
$delay: StaggeredAnimDelay($arknights-cn-anim-delay);
animation:
opacity_spawn 0.5s #{$delay} steps(1) forwards,
slide_UD 0.8s #{$delay} $forceful forwards;
}
//#endregion
//#region CN-"Endfield"
$endfield-cn-anim-delay: .3s;
@function endfieldCNAnimDelay($additionalDelay: 0s) {
@return StaggeredAnimDelay($endfield-cn-anim-delay, $additionalDelay);
}
.g-chr1 {
.chr1 {
opacity: 0;
transform: translateY(10px);
animation:
opacity_spawn
0.75s endfieldCNAnimDelay(.1s) steps(1) forwards,
slide_DU
1.2s endfieldCNAnimDelay(.1s) $forceful forwards;
}
#endfield-cn-chr1-stroke-tl-1 {
transform: translateX(-10px);
animation:
opacity_spawn
0.75s endfieldCNAnimDelay() steps(1) forwards,
slide_LR
1.2s endfieldCNAnimDelay() $forceful forwards;
}
}
.g-chr2 {
path {
opacity: 0;
transform: translateX(10px);
animation:
opacity_spawn
0.75s endfieldCNAnimDelay(.08s) steps(1) forwards,
slide_RL
1.2s endfieldCNAnimDelay(.08s) $forceful forwards;
}
}
.g-chr3 {
path {
opacity: 0;
transform: translateX(10px);
animation:
opacity_spawn
0.75s endfieldCNAnimDelay(.2s) steps(1) forwards,
slide_RL
1.2s endfieldCNAnimDelay(.2s) $forceful forwards;
}
#endfield-cn-chr3-1 { animation-delay:endfieldCNAnimDelay(.16s) }
#endfield-cn-chr3-2 { animation-delay:endfieldCNAnimDelay(.26s) }
}
.g-chr4 {
transform: translateX(-0.2px);
clip-path: polygon(0 100%, 0 100%, 100% 100%, 100% 100%);
animation: expand_DU 0.7s endfieldCNAnimDelay(.6s) forwards;
.arknights, .endfield {
transform: translateY(10px);
animation:
slide_DU
0.7s endfieldCNAnimDelay(.35s) $forceful forwards;
}
.arknights { --order: 1 }
.endfield { --order: 2 }
}
//#endregion
}
}

75
components/logo/CN/CN-small.tsx Normal file
View File

@ -0,0 +1,75 @@
import { FC } from "react";
import {HasAnimation, joinClasses} from "@utils/common";
import { motion } from "framer-motion";
import { Forceful } from "@utils/anims";
import styles from "./CN-small.module.scss";
import { LogoSmallProps } from "@components/logo/logo.types";
export const LogoSmall_CN: FC<HasAnimation & LogoSmallProps> = ({ dontAnimateChild, opacity = 1 }) => {
return (
<motion.svg
fill="none"
initial={{ opacity: 1 }}
animate={{ opacity }}
exit={{ opacity: 0 }}
transition={{ duration: .5, ease: Forceful }}
data-logo={""}
data-noanim={dontAnimateChild}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 122 38"
className={joinClasses(styles.logo, "fh")}
>
<path className={joinClasses(styles["arknights-cn"], "_0")} id={styles["arknights-cn-char-1-1"]} d="M1.5 4.6H3V0.5H0.599998V5.2H1.5V4.6ZM1.5 1.3H2.1V2.1H1.5V1.3ZM1.5 2.9H2.1V3.7H1.5V2.9Z"/>
<path className={joinClasses(styles["arknights-cn"], "_0")} id={styles["arknights-cn-char-1-2"]} d="M2.4 5.9L3.2 6.5C3.77569 5.9311 4.16012 5.19718 4.3 4.4H5.5V5.4H4.5C4.64553 5.71794 4.74649 6.05445 4.8 6.4L6.1 6.2C6.4 6 6.5 5.8 6.5 5.3V0.400002H3.5V2.8C3.5606 3.36612 3.49321 3.93862 3.30281 4.47519C3.11241 5.01176 2.80388 5.4987 2.4 5.9ZM4.4 1.3H5.5V1.9H4.4V1.3ZM4.4 2.8H5.5V3.5H4.4V2.8Z"/>
<path className={joinClasses(styles["arknights-cn"], "_1")} id={styles["arknights-cn-char-2"]} d="M8.1 5.9H10.9V6.4H11.9V0.5H7.1V6.4H8.1V5.9ZM8.1 1.5H10.9V2.7H8.1V1.5ZM8.1 3.7H10.9V5H8.1V3.7Z"/>
<path className={joinClasses(styles["arknights-cn"], "_2")} id={styles["arknights-cn-char-3"]} d="M12.4 5.7C12.684 5.91764 12.922 6.18958 13.1 6.5C13.6115 6.21178 14.0492 5.80896 14.3789 5.32316C14.7085 4.83735 14.9211 4.28177 15 3.7H17C16.9 4.7 16.8 5.3 16.6 5.4H15.1C15.318 5.69289 15.4559 6.03756 15.5 6.4H16.6C16.9365 6.37176 17.2536 6.23083 17.5 6C17.8593 5.11152 18.0296 4.15793 18 3.2V2.8H15.1C15.1746 2.57446 15.2085 2.33742 15.2 2.1H18.6V1.1H15.9L16.3 0.9L15.8 0L14.9 0.4L15.2 1.1H12.5V2.1H14.1C14.1893 2.79969 14.0767 3.51032 13.7755 4.14814C13.4743 4.78596 12.997 5.32439 12.4 5.7Z"/>
<path className={joinClasses(styles["arknights-cn"], "_3")} id={styles["arknights-cn-char-4"]} d="M18.5 3.9H19.3C19.2782 4.26964 19.1777 4.63037 19.0053 4.95804C18.8328 5.28571 18.5924 5.57277 18.3 5.8C18.6278 5.95246 18.9054 6.1953 19.1 6.5C19.8152 5.81685 20.2442 4.88747 20.3 3.9H22.8V5.4H22C22.0848 5.70486 22.1849 6.00524 22.3 6.3H23.4C23.7 6.1 23.8 5.9 23.8 5.4V3.9H24.6V3H23.8V0.899997H21.8C21.9703 0.689841 22.1054 0.453435 22.2 0.199997H21C20.9693 0.47438 20.902 0.743427 20.8 0.999997H19.4V3H18.5V3.9ZM22.8 1.7V3H21.8L22.3 2.5L21.4 1.7H22.8ZM20.4 2.7V1.7H21.3L20.7 2.2L21.6 3H20.4V2.7ZM20.7 4.2C21.1093 4.44375 21.48 4.74707 21.8 5.1L22.4 4.5C22.0697 4.26279 21.6959 4.0929 21.3 4L20.7 4.2Z"/>
<g className={joinClasses(styles["g-chr1"], "_0")}>
<path className={joinClasses(styles["endfield-cn"], styles["chr1"])} id={styles["endfield-cn-chr1-main-t"]} d="M12 13.5H9.99863L0.199997 29.2809V32.3958L12.1 28.6V27.8019L21 22.4L31.1 29.3V23.9L24.8 19.7L30.3 15.9V10.4H19.9L21.9 7.8H16.3L12 13.5Z"/>
<path className={joinClasses(styles["endfield-cn"], styles["chr1"])} id={styles["endfield-cn-chr1-main-t-inner-l"]} d="M11.2442 25.6433L7.31284 25.6433L11.2442 19.1433H12.1407L14.5794 16.7285L18.3426 20.0895L11.2442 24.7757V25.6433Z" data-inverse={""}/>
<path className={joinClasses(styles["endfield-cn"], styles["chr1"])} id={styles["endfield-cn-chr1-main-t-inner-r"]} d="M21.8376 17.161L18.9746 15.1063H24.7007L21.8376 17.161Z" data-inverse={""}/>
<path className={joinClasses(styles["endfield-cn"], styles["chr1"])} id={styles["endfield-cn-chr1-main-b"]} d="M16.676 27.0195L12.9606 29.3815L23.385 37.6215H30.805V31.8001L27.085 34.3818L16.676 27.0195Z"/>
<path className={joinClasses(styles["endfield-cn"], styles["chr1"])} id={styles["endfield-cn-chr1-stroke-tl-1"]} d="M11.8552 7.8H5.89646L0.300003 16.7743V20.7H4.01272L11.8552 7.8Z"/>
<path className={joinClasses(styles["endfield-cn"], styles["chr1"])} id={styles["endfield-cn-chr1-stroke-br-1"]} d="M21.2 23.7L17.2075 26.3793L26.6 33.1V27.4L21.2 23.7Z"/>
<path className={joinClasses(styles["endfield-cn"], styles["chr1"])} id={styles["endfield-cn-chr1-stroke-bl-1"]} d="M12.0428 30.01V34.06L0.120948 37.8574V33.813L12.0428 30.01Z"/>
</g>
<g className={joinClasses(styles["g-chr2"], "_1")}>
<path className={styles["patch"]} d="M31.3008 31.4648L30.9414 37.481L30.7852 37.5937H30.6328V31.9234L31.3008 31.4648Z"/>
<path className={joinClasses(styles["endfield-cn"])} id={styles["endfield-cn-chr2"]} d="M30.2806 10.4H42.9856V7.6H48.6756V10.4H61.3806V15H48.6756V17.9H58.4756V22.5H48.6756V23.4L61.1756 32.05V37.85L48.6756 28.95V37.7819H42.9856V29.06L30.7856 37.6172V31.8086L42.9856 23.39V22.49H33.1856V17.89H42.9856V14.99H30.2806"/>
<path className={styles["patch"]} d="M29.9766 10.4335H30.5586V14.9844L29.9766 15V10.4335Z"/>
</g>
<g className={joinClasses(styles["g-chr3"], "_2")}>
<path className={joinClasses(styles["endfield-cn"])} id={styles["endfield-cn-chr3-1"]} d="M71.3 14.8301H68.4V9.00002H63.2V14.8301H60.8V19.454H63.2V27.8975L60.1 29.0032V35.5369L71.3 31.4157V24.882L68.4 25.9877V19.454H71.3V14.8301Z"/>
<path className={joinClasses(styles["endfield-cn"])} id={styles["endfield-cn-chr3-2"]} d="M69.5 19.5687V25.05L72.1 24.05V35.55L76.6 37.85H91.7V33.15H77.4V22.05L78.6 21.55V32.05L83.8 29.85V19.55L85.2 19.05V29.35L90.4 27.25V11.45L83.8 13.95V7.85H78.6V15.95L77.4 16.45V11.15H72.1V18.45L69.5 19.5687Z"/>
</g>
<g className={joinClasses(styles["g-chr4"], "_3")}>
<rect id={styles["en-square"]} x={91.72} y={7.75} width={30.04} height={30.04} strokeWidth={0.15} stroke="#fff" fill="#fff"/>
<path className={joinClasses(styles["arknights"], "_0")} id={styles["arknights-a"]} d="M94.98 28.45H95.68L96.98 31.65H96.18L95.98 31.15H94.88L94.68 31.65H93.88L94.98 28.45Z" data-inverse={""}/>
<path className={joinClasses(styles["arknights"], "_0")} id={styles["arknights-a-inner"]} d="M95 30.65L95.4 29.45L95.85 30.65H95Z"/>
<path className={joinClasses(styles["arknights"], "_1")} id={styles["arknights-r"]} d="M97.28 28.45H98.48C99.28 28.45 99.78 28.85 99.78 29.55C99.7768 29.7418 99.7186 29.9286 99.6122 30.0881C99.5058 30.2477 99.3558 30.3733 99.18 30.45L99.88 31.65H99.08L98.48 30.65H98.08V31.65H97.28V28.45Z" data-inverse={""}/>
<path className={joinClasses(styles["arknights"], "_1")} id={styles["arknights-r-inner"]} d="M98.98 29.55C98.98 29.4439 98.9378 29.3422 98.8628 29.2672C98.7878 29.1921 98.6861 29.15 98.58 29.15H98.08V29.95H98.58C98.6861 29.95 98.7878 29.9079 98.8628 29.8328C98.9378 29.7578 98.98 29.6561 98.98 29.55Z"/>
<path className={joinClasses(styles["arknights"], "_2")} id={styles["arknights-k"]} d="M101.03 30.55V31.65H100.23V28.45H101.03V29.65L101.43 29.15L102.23 28.45H103.23L101.83 29.75L103.23 31.65H102.33L101.33 30.35L101.03 30.55Z" data-inverse={""}/>
<path className={joinClasses(styles["arknights"], "_3")} id={styles["arknights-n"]} d="M103.48 28.45H104.18L104.88 29.35L105.58 30.35H105.68C105.618 29.9529 105.585 29.5519 105.58 29.15V28.45H106.38V31.65H105.68L104.98 30.75L104.28 29.75V31.65H103.48V28.45Z" data-inverse={""}/>
<path className={joinClasses(styles["arknights"], "_4")} id={styles["arknights-i"]} d="M106.78 28.45H107.58V31.65H106.78V28.45Z" data-inverse={""}/>
<path className={joinClasses(styles["arknights"], "_5")} id={styles["arknights-g"]} d="M107.9 30.05C107.885 29.8229 107.919 29.5954 107.999 29.3824C108.08 29.1695 108.204 28.9762 108.365 28.8153C108.526 28.6544 108.72 28.5297 108.932 28.4494C109.145 28.3692 109.373 28.3353 109.6 28.35C109.896 28.345 110.187 28.4278 110.436 28.588C110.685 28.7482 110.882 28.9785 111 29.25L110.2 29.45C110.133 29.3538 110.043 29.2758 109.938 29.2234C109.833 29.171 109.717 29.1458 109.6 29.15C109.361 29.15 109.132 29.2448 108.964 29.4136C108.795 29.5824 108.7 29.8113 108.7 30.05C108.7 30.2887 108.795 30.5176 108.964 30.6864C109.132 30.8552 109.361 30.95 109.6 30.95C110.1 30.95 110.4 30.75 110.4 30.45H109.6V29.85H111.1V31.65H110.4V31.45C110.3 31.65 109.9 31.75 109.6 31.75C109.373 31.7647 109.145 31.7308 108.932 31.6506C108.72 31.5703 108.526 31.4456 108.365 31.2847C108.204 31.1238 108.08 30.9305 107.999 30.7175C107.919 30.5046 107.885 30.277 107.9 30.05Z" data-inverse={""}/>
<path className={joinClasses(styles["arknights"], "_6")} id={styles["arknights-h"]} d="M113.48 29.65V28.45H114.28V31.65H113.48V30.45H112.28V31.65H111.48V28.45H112.28V29.65H113.48Z" data-inverse={""}/>
<path className={joinClasses(styles["arknights"], "_7")} id={styles["arknights-t"]} d="M116.18 31.65H115.48V29.15H114.48V28.45H117.18V29.15H116.18V31.65Z" data-inverse={""}/>
<path className={joinClasses(styles["arknights"], "_8")} id={styles["arknights-s"]} d="M118.1 30.25C117.887 30.2073 117.694 30.0963 117.549 29.9339C117.405 29.7715 117.317 29.5666 117.3 29.35C117.313 29.2053 117.354 29.0646 117.421 28.9358C117.488 28.8071 117.58 28.693 117.692 28.6C117.803 28.5071 117.932 28.4371 118.071 28.3942C118.21 28.3513 118.355 28.3363 118.5 28.35C118.773 28.3414 119.04 28.4258 119.258 28.5894C119.476 28.753 119.632 28.986 119.7 29.25L119 29.45C118.988 29.3837 118.963 29.3205 118.926 29.2642C118.889 29.2079 118.841 29.1596 118.785 29.1222C118.729 29.0849 118.666 29.0592 118.6 29.0468C118.534 29.0344 118.466 29.0355 118.4 29.05C118.2 29.05 118.1 29.15 118.1 29.25C118.1 29.35 118.4 29.55 118.8 29.75C119.2 29.95 119.8 30.15 119.8 30.75C119.8 31.35 119.3 31.75 118.5 31.75C118.189 31.7629 117.882 31.6716 117.628 31.4904C117.375 31.3093 117.189 31.0487 117.1 30.75L117.9 30.55C118 30.75 118.2 31.05 118.5 31.05C118.8 31.05 118.9 30.95 118.9 30.75C118.9 30.55 118.6 30.45 118.1 30.25Z" data-inverse={""}/>
<path className={joinClasses(styles["endfield"], "_0")} id={styles["endfield-e-1"]} d="M96.68 36.25H93.78V32.45H96.68V33.25H94.78V33.95H96.18V34.75H94.78V35.45H96.68V36.25Z" data-inverse={""}/>
<path className={joinClasses(styles["endfield"], "_1")} id={styles["endfield-n"]} d="M100.68 36.25H99.78L98.98 35.25L98.18 33.95C98.08 33.95 98.18 34.55 98.18 35.45V36.25H97.18V32.45H98.08L98.88 33.55L99.78 34.65V32.45H100.68V36.25Z" data-inverse={""}/>
<path className={joinClasses(styles["endfield"], "_2")} id={styles["endfield-d-1"]} d="M106.58 36.25H101.28V32.45H102.98C103.238 32.4364 103.496 32.4755 103.738 32.5649C103.98 32.6543 104.201 32.7921 104.389 32.9699C104.576 33.1477 104.725 33.3617 104.826 33.599C104.928 33.8363 104.98 34.0918 104.98 34.35C104.98 34.6081 104.928 34.8637 104.826 35.1009C104.725 35.3382 104.576 35.5523 104.389 35.7301C104.201 35.9079 103.98 36.0457 103.738 36.1351C103.496 36.2245 103.238 36.2636 102.98 36.25" data-inverse={""}/>
<path className={joinClasses(styles["endfield"], "_2")} id={styles["endfield-d-2-inner"]} d="M102.98 33.25H102.18V35.45H102.98C103.12 35.4507 103.259 35.4219 103.387 35.3655C103.516 35.3092 103.631 35.2264 103.725 35.1227C103.819 35.019 103.891 34.8966 103.935 34.7635C103.979 34.6303 103.994 34.4895 103.98 34.35C103.981 34.0748 103.879 33.8091 103.694 33.6055C103.509 33.4019 103.254 33.275 102.98 33.25Z"/>
<path className={joinClasses(styles["endfield"], "_3")} id={styles["endfield-f"]} d="M107.88 33.25H106.18V34.05H107.58V34.85H106.18V36.25H105.28V32.45H107.98L107.88 33.25Z" data-inverse={""}/>
<path className={joinClasses(styles["endfield"], "_4")} id={styles["endfield-i"]} d="M109.33 36.25H108.43V32.45H109.33V36.25Z" data-inverse={""}/>
<path className={joinClasses(styles["endfield"], "_5")} id={styles["endfield-e-2"]} d="M112.68 36.25H109.88V32.45H112.68V33.25H110.78V33.95H112.28V34.75H110.78V35.45H112.68V36.25Z" data-inverse={""}/>
<path className={joinClasses(styles["endfield"], "_6")} id={styles["endfield-l"]} d="M115.98 36.25H113.28V32.45H114.18V35.45H115.98V36.25Z" data-inverse={""}/>
<path className={joinClasses(styles["endfield"], "_7")} id={styles["endfield-d-2"]} d="M120.78 36.25H116.28V32.45H117.98C118.238 32.4364 118.496 32.4755 118.738 32.5649C118.98 32.6543 119.201 32.7921 119.389 32.9699C119.576 33.1477 119.725 33.3617 119.826 33.599C119.928 33.8363 119.98 34.0918 119.98 34.35C119.98 34.6081 119.928 34.8637 119.826 35.1009C119.725 35.3382 119.576 35.5523 119.389 35.7301C119.201 35.9079 118.98 36.0457 118.738 36.1351C118.496 36.2245 118.238 36.2636 117.98 36.25" data-inverse={""}/>
<path className={joinClasses(styles["endfield"], "_7")} id={styles["endfield-d-2-inner_2"]} d="M117.98 33.25H117.18V35.45H117.98C118.12 35.4507 118.259 35.4219 118.387 35.3655C118.516 35.3092 118.631 35.2264 118.725 35.1227C118.819 35.019 118.891 34.8966 118.935 34.7635C118.979 34.6303 118.994 34.4895 118.98 34.35C118.981 34.0748 118.879 33.8091 118.694 33.6055C118.509 33.4019 118.254 33.275 117.98 33.25Z"/>
</g>
</motion.svg>
);
};

49
components/logo/EN/EN-big.anim.scss Normal file
View File

@ -0,0 +1,49 @@
@keyframes logo_cn_main_scale {
from { transform: scale(1) }
to { transform: scale(2.125) }
}
@keyframes logo_cn_main_stroke {
from {
stroke-width: 0;
fill: #fff;
}
30% {
stroke-width: 0.2px;
stroke: #fff;
fill: transparent;
}
to {
stroke-width: 0;
fill: #fff;
}
}
@keyframes logo_cn_main_translate {
from { transform: translate(30px, 16px) }
to { transform: translate(13px, 16px) }
}
@keyframes logo_cn_1 {
100%,0% { transform: translate(35.9px, 35.5px) scale(1.215) }
40% { transform: translate(37.9px, 44.5px) scale(1.215) }
}
@keyframes logo_cn_2 {
from { transform: translate(12px, -8px) }
to { transform: translate(0) }
}
@keyframes end_d_slideLR {
from { transform: translateX(-8.5px) }
to { transform: translateX(0) }
}
@keyframes field_e_stretch {
from {
transform: scaleX(1.5);
}
to {
transform: scaleX(1);
}
}
@keyframes field_e_path {
from { d: path("M34.2,50.3h13V44.5h-13V40.7H44.6l2.9-2.8v-3H28.7h19V54.6H34.2Z") }
to { d: path("M34.2,50.3h13V44.5h-13V40.7H44.6l2.9-2.8v-3H28.7V60.5h19V54.6H34.2Z") }
}

204
components/logo/EN/EN-big.module.scss Normal file
View File

@ -0,0 +1,204 @@
@import 'styles/anims';
@import 'EN-big.anim';
.logo {
width: clamp(700px, 100%, 2000px);
height: clamp(400px, 100%, 1000px);
path {
fill: #fff;
}
&[data-noanim] {
#cn-square-1, #cn-square-2, #end-n-blocker { opacity: 0; }
#cn { opacity: 1; }
}
&:not([data-noanim]){
#cn-square-1 {
animation:
logo_cn_1
applyPlaybackSpeed(1s) steps(1),
opacity_fade
applyPlaybackSpeed(0s)
applyPlaybackSpeed(1s) $forceful forwards;
}
#cn-square-2 {
transform: translate(-12px, -12px);
animation:
opacity_spawn
applyPlaybackSpeed(0s)
applyPlaybackSpeed(0.8s) steps(1) forwards,
logo_cn_2
applyPlaybackSpeed(0.4s)
applyPlaybackSpeed(0.8s) steps(1) forwards,
opacity_fade
applyPlaybackSpeed(0.2s)
applyPlaybackSpeed(1s) steps(1) forwards;
}
#cn {
animation:
opacity_spawn
applyPlaybackSpeed(0.2s)
applyPlaybackSpeed(1s) steps(1) forwards,
opacity_fade
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(1.6s) steps(1) forwards,
logo_cn_main_scale
applyPlaybackSpeed(0s)
applyPlaybackSpeed(1.5s) steps(1) forwards,
opacity_spawn
applyPlaybackSpeed(0.6s)
applyPlaybackSpeed(1.5s) steps(1) forwards;
transform-origin: center;
#cn-path {
animation:
logo_cn_main_stroke
applyPlaybackSpeed(1.1s)
applyPlaybackSpeed(1s) steps(1) forwards,
logo_cn_main_translate
applyPlaybackSpeed(0.97s)
applyPlaybackSpeed(1.5s) $forceful forwards;
}
}
.arknights {
opacity: 0;
transform: translateY(-10px);
$delay: calc(
applyPlaybackSpeed(1.8s) +
applyPlaybackSpeed(0.05s) * var(--order)
);
animation:
opacity_spawn
applyPlaybackSpeed(0.5s) #{$delay} steps(1) forwards,
slide_UD
applyPlaybackSpeed(0.8s) #{$delay} $forceful forwards;
}
.end {
opacity: 0;
animation: opacity_spawn
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(3.3s) $forceful forwards;
}
.field {
opacity: 0;
animation: opacity_spawn
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(4.25s) $forceful forwards;
}
#end-e {
transform: translateX(10px);
animation:
opacity_spawn
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(2.5s) steps(1) forwards,
slide_RL
applyPlaybackSpeed(0.6s)
applyPlaybackSpeed(2.7s) $slow-down forwards;
}
#end-d {
transform: translateX(-8.5px);
animation:
opacity_spawn
applyPlaybackSpeed(0.35s)
applyPlaybackSpeed(3.2s) steps(1) forwards,
end_d_slideLR
applyPlaybackSpeed(1s)
applyPlaybackSpeed(3.4s) $slow-down forwards;
}
#end-n {
animation: opacity_spawn
applyPlaybackSpeed(0s)
applyPlaybackSpeed(3.5s) steps(1) forwards;
}
#end-n-blocker {
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
animation:
expand_LR
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(3s) $forceful forwards,
collapse_LR
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(3.5s) $forceful forwards;
}
#field-f {
animation:
opacity_spawn
applyPlaybackSpeed(0.4s)
applyPlaybackSpeed(3.35s) steps(1) forwards,
slide_RL
applyPlaybackSpeed(0.6s)
applyPlaybackSpeed(3.35s) $forceful forwards;
}
#field-i {
animation:
opacity_spawn
applyPlaybackSpeed(0.4s)
applyPlaybackSpeed(3.45s) steps(1) forwards,
slide_RL
applyPlaybackSpeed(0.6s)
applyPlaybackSpeed(3.45s) $forceful forwards,
field_e_stretch
applyPlaybackSpeed(0.75s)
applyPlaybackSpeed(3.45s) $forceful forwards;
}
#field-e-2 {
animation:
opacity_spawn
applyPlaybackSpeed(0.4s)
applyPlaybackSpeed(3.45s) steps(1) forwards,
slide_RL
applyPlaybackSpeed(0.6s)
applyPlaybackSpeed(3.45s) $forceful forwards,
field_e_path
applyPlaybackSpeed(1s)
applyPlaybackSpeed(3.5s) $forceful forwards,
field_e_stretch
applyPlaybackSpeed(0.75s)
applyPlaybackSpeed( 3.45s) $forceful forwards;
}
#field-e {
animation:
opacity_spawn
applyPlaybackSpeed(0.4s)
applyPlaybackSpeed(3.5s) steps(1) forwards,
slide_RL
applyPlaybackSpeed(0.6s)
applyPlaybackSpeed(3.5s) $forceful forwards,
field_e_path
applyPlaybackSpeed(1s)
applyPlaybackSpeed(3.5s) $forceful forwards,
field_e_stretch
applyPlaybackSpeed(1s)
applyPlaybackSpeed(3.5s) $forceful forwards;
}
#field-l {
animation:
opacity_spawn
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(3.85s) steps(1) forwards,
slide_DU
applyPlaybackSpeed(0.7s)
applyPlaybackSpeed(3.75s) $slow-down forwards;
}
#field-d {
animation:
opacity_spawn
applyPlaybackSpeed(0s)
applyPlaybackSpeed(4.2s) steps(1) forwards;
}
#field-d-2 {
transform: translateY(10px);
animation:
opacity_spawn
applyPlaybackSpeed(0.14s)
applyPlaybackSpeed(4.1s) steps(1) forwards,
slide_DU
applyPlaybackSpeed(0.6s)
applyPlaybackSpeed(4.1s) $slow-down forwards;
}
}
}
#field-d {
fill: transparent;
stroke: #fff;
stroke-width: 0.1;
}

69
components/logo/EN/EN-big.tsx Normal file
View File

@ -0,0 +1,69 @@
import styles from "@root/components/logo/EN/EN-big.module.scss";
import {HasAnimation, joinClasses, whichWider} from "@utils/common";
import { motion } from "framer-motion";
import {FC, useEffect, useRef, useState} from "react";
import { Forceful } from "@utils/anims";
export const LogoLarge_EN: FC<HasAnimation> = ({ dontAnimateChild = null}) => {
const mode = useRef("fh");
const [isExiting, setIsExiting] = useState(false);
useEffect(() => {
mode.current = whichWider() === "width" ? "fw" : "fh";
}, []);
return (
<motion.svg
initial={{ opacity: 0 }}
animate={{
opacity: 1,
y: 0
}}
exit={{
opacity: 0,
y: dontAnimateChild ? 0 : 20,
}}
transition={{
duration: isExiting ? 0.5 : 0.3,
ease: Forceful
}}
data-logo={""}
data-noanim={dontAnimateChild}
className={joinClasses(styles.logo, mode.current, "abs")}
viewBox="-60 -55 242.8 181"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<clipPath id={"end-e__field-d-inner"}>
<path d="M93.2,41.4a11,11,0,0,0-1.5-2.6,11.4,11.4,0,0,0-2.3-2,10,10,0,0,0-3.3-1.4,21.4,21.4,0,0,0-4.5-.5H69.8V54.3l5.6-5.5V41h5.7c4.8,0,7.2,2.2,7.2,6.5v.2c0,4.5-2.4,6.7-7.2,6.7H69.8v6.2H81.6a17.4,17.4,0,0,0,5.3-.8,10.3,10.3,0,0,0,3.6-2,10.6,10.6,0,0,0,2.2-2.9,11.6,11.6,0,0,0,1.1-3.3,18.7,18.7,0,0,0,.3-3.4V47a26.4,26.4,0,0,0-.2-2.9,26.8,26.8,0,0,0-.7-2.7Z"/>
</clipPath>
</defs>
<path id={styles["cn-square-1"]}
d="M 50 0 L 70 0 L 70 20 L 50 20 L 50 0 Z M 50.359 0.367 L 69.732 19.671"
transform="translate(35.9, 35.5) scale(1.215)"
fill="none"
stroke="#FFF"/>
<path id={styles["cn-square-2"]} className="o0" d="M96,35h25.5v25.5h-25.5v-25.5l1,1h23.5,v23.5,h-23.5,v-23.5Z"/>
<g id={styles["cn"]} className="o0">
<path id={styles["cn-path"]} clipPath="url(#cn-inner)" d="M98.1,50.3h-.3v.2h.3ZM96,60.4h25.4V35H96Zm5.8-9.7v-.5h.4V50h.4a.3.3,0,0,0-.1.2h.5v.6h.2V51H103v.4a.4.4,0,0,1-.1.3h-.3a.3.3,0,0,0-.1-.2h.2V51h-.6a1.6,1.6,0,0,1-.4.7l-.2-.2a.5.5,0,0,0,.3-.5h-.2v-.2h.2Zm.6.7a.4.4,0,0,0-.3-.2l.2-.2.3.3Zm-2.4-.9v-.2h.7v-.2h.3a.3.3,0,0,0,.1.2h.6v.2h-.9v.2h.7c0,.5,0,.7-.1.8h-.5c0-.1-.1-.2-.1-.3h.4a1,1,0,0,1,.1-.4h-.6c0,.3-.2.5-.5.7a.2.2,0,0,0-.2-.2c.5-.2.5-.6.5-1Zm-1.5-.4h1.3v1.6H98.5Zm-.9,0h.8v1.3c0,.1-.1.2-.1.3h-.4c0-.1,0-.2-.1-.2h.3v-.3h-.3a.6.6,0,0,1-.3.6l-.2-.2a.8.8,0,0,0,.3-.8Zm-.8,0h.6v1.1H97v.2h-.2Zm-.1,4.5L98.2,52h1.5l-2,3.8h-1Zm3.3,4.6-3.3.7V58.7l3.3-.6Zm21,.7h-4l-1.2-.6v-.6h0V56.3l-.7.2V55.1h-.4v1.7l.7-.2v1.7l-2.6.9V60l-3.3-2.4v2.3H108V57.6l-3.2,2.3h-2L100.1,58l1-.8,2.7,1.9,4.2-2.9v-.3h-2.6V54.7H108v-.8h-3.3v.4l-1.4.9,1.6,1.1v1.4l-2.6-1.8-2.4,1.7v.2l-3.2.7V58l2.6-4.5h.5L101,52h1.4l-.5.7H108V52h1.5v.7h3.4v1.2h.4V52.4h1.4v1.5h.7v1h.4V52.9h1.4v1.4l.3-.2V52h1.4v1.6l1.7-.7v4.2l-1.4.6V54.9l-.3.2v2.7l-1.4.6V55.6h-.3v2.9H121ZM99.6,50.4h-.8v.3h.8Zm-1.5.3h-.3v.2h.3Zm1.5.3h-.8v.3h.8ZM101.2,57l1.1-.8,1.4,1v1.5Zm-4-6.7H97v.2h.2ZM100,55.3h-.4l-.7,1.4h.7v-.2l1.6-1.2-.7-.5Zm12.7-1.4h-3.2v.8h2.6v1.2h-2.6v.3l3,2v-.6l.8-.3V55.1h-.6ZM101.5,54.45m1,0.3.9-.8h-2.1ZM102.1,50.5h.55v.25h-.5Z"/>
</g>
<path id={styles["arknights-a"]} className={joinClasses(styles.arknights, '_1')} d="M1,2.3h.9l.2.7h.8L1.9.1H1L0,3H.8Zm.2-.8l.2,-.8h.1l.25,.9h-.58Z"/>
<path id={styles["arknights-r"]} className={joinClasses(styles.arknights, '_2')} d="M12.3,1.9h.4L13.3,3h.8l-.7-1.2A.8.8,0,0,0,14,1c0-.7-.6-.9-1.3-.9H11.5V3h.8Zm0-1.3h.4c.3,0,.5.1.5.4a.5.5,0,0,1-.5.4h-.4Zv-.2h-.2v.3h.2l-.2-.2"/>
<path id={styles["arknights-k"]} className={joinClasses(styles.arknights, '_3')} d="M23.6,2.2l.4-.4L24.8,3h.8L24.4,1.2l1-1.1h-.8l-.9,1.1h-.1V.1h-.7V3h.7Z"/>
<path id={styles["arknights-n"]} className={joinClasses(styles.arknights, '_4')} d="M34.2,.1v2.9h.7v-1.9l1.1,1.9h.8v-2.9h-.8v1.9l-1.1-1.9Z"/>
<path id={styles["arknights-i"]} className={joinClasses(styles.arknights, '_5')} d="M46.6.1h-.8V3h.8Z"/>
<path id={styles["arknights-g"]} className={joinClasses(styles.arknights, '_6')} d="M57,3a2.4,2.4,0,0,0,1.1-.3V1.3H56.9v.6h.5v.4h-.3a.8.8,0,0,1-.9-.9A.8.8,0,0,1,57,.6l.6.2L58,.4A1.3,1.3,0,0,0,57,0a1.6,1.6,0,0,0-1.6,1.5A1.4,1.4,0,0,0,57,3"/>
<path id={styles["arknights-h"]} className={joinClasses(styles.arknights, '_7')} d="M67,0v3h.8v-1.2h1v1.2h.8v-3h-.8v1h-1v-1Z"/>
<path id={styles["arknights-t"]} className={joinClasses(styles.arknights, '_8')} d="M79.3,3H80V.6h.9V.1H78.4V.6h.9Z"/>
<path id={styles["arknights-s"]} className={joinClasses(styles.arknights, '_9')} d="M89.7,2m.3,0l-.4,.6a1.7,1.7,0,0,0,1.2.4c.8,0,1.2-.4,1.2-.9s-.2-.6-.6-.8h-.4c-.3-.1-.5-.2-.5-.4s.1-.2.4-.2l.6.2.4-.4a1.3,1.3,0,0,0-1-.4c-.7,0-1.2.4-1.2.9a.8.8,0,0,0,.7.8h.4c.3.1.4.2.4.4s-.1.2-.4.2"/>
<path id={styles["end-e"]} className={styles.end} d="M5.5,21.7H18.4V15.8H5.5V12.1H15.9l2.9-2.9V6.3H0V31.8H19V25.9H5.5Z"/>
<path id={styles["end-n"]} className={styles.end} d="M44.5,26.4V6.3H39V22.4L27.7,6.3H21.5V31.9H27V15L39,31.9Z"/>
<rect id={styles["end-n-blocker"]} x="21.6" y="6.3" width="23" height="25.7" fill="white"/>
<path id={styles["end-d"]} className={styles.end} d="M71.4,22.8c.1-1.1.2-2.2.2-3.4v-1a14.6,14.6,0,0,0-.2-3,13.4,13.4,0,0,0-.7-2.7,7,7,0,0,0-1.5-2.5,9.3,9.3,0,0,0-2.3-2.1,12.6,12.6,0,0,0-3.3-1.4,21.5,21.5,0,0,0-4.5-.4H47.3V31.8H59.1a14.4,14.4,0,0,0,5.3-.8A10.2,10.2,0,0,0,68,29.1a9.3,9.3,0,0,0,2.2-3,11,11,0,0,0,1.2-3.3m-5.6-3.7c0,4.4-2.4,6.6-7.1,6.6H47.4l5.5-5.5V12.3h5.8c4.7,0,7.1,2.2,7.1,6.6Z"/>
<path id={styles["field-f"]} className={styles.field} d="M0,60.5H5.5V50.4H18V44.6H5.5V40.8H18.3V35H0Z"/>
<path id={styles["field-i"]} className={styles.field} d="M20.4,60.5h5.5V42.7H20.5l5.4-5.5V35H20.4Z"/>
<path id={styles["field-l"]} className={styles.field} d="M55.7,35H50.2V60.5H68.1V54.2H55.7Z"/>
<path id={styles["field-e-2"]} className={styles.field} d="M34.2,50.3h13V44.5h-13V40.7H44.6l2.9-2.8v-3H28.7V60.5h19V54.6H34.2Z"/>
<path id={styles["field-e"]} className={styles.field} d="M34.2,50.3h13V44.5h-13V40.7H44.6l2.9-2.8v-3H28.7V60.5h19V54.6H34.2Z"/>
<path id={styles["field-d"]} className={styles.field} stroke={"#fff"} strokeWidth={0.5} clipPath={`url(#end-e__field-d-inner)`} d="M93.2,41.4a11,11,0,0,0-1.5-2.6,11.4,11.4,0,0,0-2.3-2,10,10,0,0,0-3.3-1.4,21.4,21.4,0,0,0-4.5-.5H69.8V54.3l5.6-5.5V41h5.7c4.8,0,7.2,2.2,7.2,6.5v.2c0,4.5-2.4,6.7-7.2,6.7H69.8v6.2H81.6a17.4,17.4,0,0,0,5.3-.8,10.3,10.3,0,0,0,3.6-2,10.6,10.6,0,0,0,2.2-2.9,11.6,11.6,0,0,0,1.1-3.3,18.7,18.7,0,0,0,.3-3.4V47a26.4,26.4,0,0,0-.2-2.9,26.8,26.8,0,0,0-.7-2.7Z"/>
<path id={styles["field-d-2"]} className={styles.field} onAnimationEnd={() => setIsExiting(true)} d="M93.2,41.4a11,11,0,0,0-1.5-2.6,11.4,11.4,0,0,0-2.3-2,10,10,0,0,0-3.3-1.4,21.4,21.4,0,0,0-4.5-.5H69.8V54.3l5.6-5.5V41h5.7c4.8,0,7.2,2.2,7.2,6.5v.2c0,4.5-2.4,6.7-7.2,6.7H69.8v6.2H81.6a17.4,17.4,0,0,0,5.3-.8,10.3,10.3,0,0,0,3.6-2,10.6,10.6,0,0,0,2.2-2.9,11.6,11.6,0,0,0,1.1-3.3,18.7,18.7,0,0,0,.3-3.4V47a26.4,26.4,0,0,0-.2-2.9,26.8,26.8,0,0,0-.7-2.7Z"/>
</motion.svg>);
};

58
components/logo/EN/EN-small.module.scss Normal file
View File

@ -0,0 +1,58 @@
@import "styles/anims";
@keyframes reset-translateX { to { transform: translateX(0); } }
.logo {
max-width: 300px;
&:not([data-noanim]) {
$arknights-delay: 0;
.arknights {
opacity: 0;
transform: translateY(-10px);
$delay: calc(
0.1s +
0.05s * var(--order)
);
animation:
opacity_spawn
0.5s #{$delay} steps(1) forwards,
slide_UD
0.8s #{$delay} $forceful forwards;
}
$endfield-delay: 0.3s;
@function endfieldAnimDelay($additionalDelay: 0s) {
@return calc(
#{$endfield-delay} +
0.05s * var(--order) + #{$additionalDelay}
);
}
.end, .field {
transform: translateX(-5px);
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
//opacity: 0;
animation:
//opacity_spawn 0s #{endfieldAnimDelay(.05s)} steps(1) forwards,
expand_LR 0.5s #{endfieldAnimDelay()} forwards,
reset-translateX 0.5s #{endfieldAnimDelay()} forwards,
}
#cn {
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
animation: expand_LR
0.5s #{endfieldAnimDelay(0.2s)} forwards;
.a,
.e-chr1,
.e-chr2,
.e-chr3 {
--order: 1;
transform: translateX(-10px);
animation: reset-translateX
0.5s #{endfieldAnimDelay(0.5s)} $slow-down forwards;
}
.a {
--order: 0;
transform: translateX(-5px);
}
}
}
}

70
components/logo/EN/EN-small.tsx Normal file
View File

@ -0,0 +1,70 @@
import { FC } from "react";
import {HasAnimation, joinClasses} from "@utils/common";
import styles from "./EN-small.module.scss";
import { Forceful } from "@utils/anims";
import { motion } from "framer-motion";
import { LogoSmallProps } from "@components/logo/logo.types";
export const LogoSmall_EN: FC<HasAnimation & LogoSmallProps> = ({ dontAnimateChild, opacity }) => {
return (
<motion.svg
fill="none"
initial={{ opacity: 1 }}
animate={{ opacity }}
exit={{ opacity: 0 }}
transition={{ duration: .5, ease: Forceful }}
data-logo={""}
data-noanim={dontAnimateChild}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 170 29"
className={joinClasses(styles.logo, "fh")}
>
<defs>
<clipPath id="cn-square__hide">
<rect x="147.327" y="6.57262" width="22.4" height="22.4032"/>
</clipPath>
</defs>
<path id={styles["arknights-a"]} className={joinClasses(styles.arknights, '_0')} d="M48.6268 2.87581H49.4268L49.6268 3.47581H50.3268L49.4268 0.875809H48.6268L47.7268 3.47581H48.4268L48.6268 2.87581ZM48.8268 2.17581C48.8576 1.90143 48.9248 1.63238 49.0268 1.37581C49.1268 1.67581 49.1268 1.97581 49.2268 2.17581V2.37581H48.6268L48.8268 2.17581Z" fill="white"/>
<path id={styles["arknights-r"]} className={joinClasses(styles.arknights, '_1')} d="M56.9038 2.48961H57.2422L57.7499 3.47582H58.4268L57.8345 2.39995C57.9835 2.3593 58.1149 2.26611 58.2072 2.13574C58.2995 2.00537 58.3471 1.84559 58.3422 1.68271C58.3422 1.05513 57.8345 0.875816 57.2422 0.875816H56.2268V3.47582H56.9038V2.48961ZM56.9038 1.32409H57.2422C57.4961 1.32409 57.6653 1.41375 57.6653 1.68271C57.6455 1.78549 57.5924 1.87767 57.5151 1.94319C57.4377 2.00872 57.3412 2.04345 57.2422 2.04133H56.9038V1.32409ZM56.9038 1.32409V1.14478H56.7345V1.41375H56.9038L56.7345 1.23444" fill="white"/>
<path id={styles["arknights-k"]} className={joinClasses(styles.arknights, '_2')} d="M65.1269 2.77581L65.4269 2.37581L66.0269 3.47581H66.8269L65.8269 1.97581L66.6269 0.875809H65.9269L65.1269 1.87581V0.875809H64.4269V3.47581H65.1269V2.77581Z" fill="white"/>
<path id={styles["arknights-n"]} className={joinClasses(styles.arknights, '_3')} d="M73.3268 2.57581C73.3268 2.27581 73.2268 1.97581 73.2268 1.67581L73.5268 2.17581L74.2268 3.47581H74.9268V0.875809H74.2268V1.77581C74.2268 2.07581 74.3268 2.37581 74.3268 2.67581L74.0268 2.07581L73.3268 0.875809H72.7268V3.47581H73.3268V2.57581Z" fill="white"/>
<path id={styles["arknights-i"]} className={joinClasses(styles.arknights, '_4')} d="M81.8268 0.875809H81.1268V3.47581H81.8268V0.875809Z" fill="white"/>
<path id={styles["arknights-g"]} className={joinClasses(styles.arknights, '_5')} d="M90.2268 3.17582V1.97582H89.2268V2.47582H89.6268V2.87582C89.6268 2.97582 89.4268 2.97582 89.3268 2.97582C89.2268 2.97582 88.6268 2.67582 88.6268 2.17582C88.6124 2.07587 88.6198 1.97398 88.6484 1.87715C88.6771 1.78031 88.7264 1.69082 88.7929 1.61483C88.8594 1.53883 88.9415 1.47812 89.0337 1.43686C89.1259 1.3956 89.2259 1.37478 89.3268 1.37582L89.8268 1.57582L90.2268 1.17582C89.957 1.00132 89.6474 0.898106 89.3268 0.875816C89.1479 0.86201 88.9681 0.885404 88.7986 0.944524C88.6291 1.00364 88.4738 1.09721 88.3423 1.21933C88.2107 1.34145 88.1059 1.48948 88.0344 1.6541C87.9629 1.81871 87.9263 1.99635 87.9268 2.17582C87.9087 2.35989 87.9333 2.54566 87.9989 2.71863C88.0644 2.8916 88.169 3.04709 88.3045 3.17295C88.4401 3.2988 88.6028 3.39163 88.7802 3.44417C88.9575 3.4967 89.1446 3.50754 89.3268 3.47582C89.4894 3.4896 89.653 3.47011 89.8077 3.41853C89.9625 3.36695 90.1051 3.28436 90.2268 3.17582" fill="white"/>
<path id={styles["arknights-h"]} className={joinClasses(styles.arknights, '_6')} d="M98.0269 2.37581H97.0269V3.47581H96.4268V0.875809H97.0269V1.87581H98.0269V0.875809H98.6269V3.47581H98.0269V2.37581Z" fill="white"/>
<path id={styles["arknights-t"]} className={joinClasses(styles.arknights, '_7')} d="M105.427 1.37581H104.727V0.875809H106.827V1.37581H106.127V3.47581H105.427V1.37581Z" fill="white"/>
<path id={styles["arknights-s"]} className={joinClasses(styles.arknights, '_8')} d="M113.727 2.97582C113.496 2.95688 113.281 2.8494 113.127 2.67582L112.727 3.07582C112.859 3.20521 113.015 3.30718 113.187 3.37583C113.358 3.44448 113.542 3.47847 113.727 3.47582C114.427 3.47582 114.827 3.07582 114.827 2.67582C114.827 2.27582 114.627 2.17582 114.227 1.97582H113.927C113.627 1.87582 113.527 1.87582 113.527 1.67582C113.527 1.47582 113.627 1.47582 113.827 1.47582L114.427 1.67582L114.727 1.27582C114.471 1.07412 114.153 0.968029 113.827 0.975818C113.227 0.975818 112.827 1.27582 112.827 1.77582C112.827 2.27582 113.127 2.27582 113.427 2.37582L113.727 2.57582C114.027 2.67582 114.127 2.67582 114.127 2.87582C114.127 3.07582 114.027 3.07582 113.727 3.07582" fill="white"/>
<path id={styles["end-e"]} className={joinClasses("_0", styles["end"])} d="M5.02684 19.9758H16.2268V14.8758H5.02684V11.5758H13.9268L16.4268 9.07582V6.57582H0.226845V28.7758H16.6268V23.5758H5.02684V19.9758Z" fill="white"/>
<path id={styles["end-n"]} className={joinClasses("_1", styles["end"])} d="M24.2269 6.6758L34.0268 20.5758V6.6758H38.7269V23.9758L34.0268 28.7758L23.5268 14.0758V28.7758H18.8269V6.6758H24.2269Z" fill="white"/>
<path id={styles["end-d"]} className={joinClasses("_2", styles["end"])} d="M61.4268 12.1758C61.171 11.3726 60.7637 10.6258 60.2268 9.97582C59.6349 9.29763 58.9634 8.69327 58.2268 8.17582C57.3225 7.63926 56.3459 7.23515 55.3268 6.97582C54.048 6.68411 52.7383 6.54978 51.4268 6.57582H41.2268V28.7758H51.4268C52.9857 28.7623 54.5346 28.5266 56.0268 28.0758C57.1592 27.6655 58.2091 27.0559 59.1268 26.2758C59.9211 25.578 60.5672 24.7279 61.0268 23.7758C61.4928 22.8601 61.8293 21.8841 62.0268 20.8758C62.1962 19.919 62.2632 18.9468 62.2268 17.9758V17.0758C62.2686 16.2373 62.2014 15.397 62.0268 14.5758C61.9221 13.755 61.7207 12.9494 61.4268 12.1758V12.1758ZM57.2268 17.6758C57.2268 21.4758 55.1268 23.3758 51.0268 23.3758H41.2268L46.0268 18.5758V11.7758H51.0268C55.1268 11.7758 57.2268 13.6758 57.2268 17.4758V17.6758Z" fill="white"/>
<path id={styles["field-f"]} className={joinClasses("_3", styles["field"])} d="M64.0268 28.7758H68.8268V19.9758H79.6268V14.9758H68.8268V11.6758H79.9268V6.6758H64.0268V28.7758Z" fill="white"/>
<path id={styles["field-i"]} className={joinClasses("_4", styles["field"])} d="M81.7268 28.7758H86.5268V13.2758H81.8268L86.5268 8.5758V6.6758H81.7268V28.7758Z" fill="white"/>
<path id={styles["field-e"]} className={joinClasses("_5", styles["field"])} d="M104.927 19.9758H93.7269V23.5758H99.5769H105.427V28.7758H88.9268V6.57582H105.227V9.07582L102.727 11.5758H93.7269V14.8758H104.927V19.9758Z" fill="white"/>
<path id={styles["field-l"]} className={joinClasses("_6", styles["field"])} d="M107.527 6.6758H112.327V23.2758H123.027V28.7758H107.527V6.6758Z" fill="white"/>
<path id={styles["field-d"]} className={joinClasses("_7", styles["field"])} d="M144.771 12.1758C144.515 11.3726 144.108 10.6258 143.571 9.97582C142.979 9.29763 142.307 8.69327 141.571 8.17582C140.667 7.63926 139.69 7.23515 138.671 6.97582C137.392 6.68411 136.082 6.54978 134.771 6.57582H124.571V28.7758H134.771C136.33 28.7623 137.879 28.5266 139.371 28.0758C140.503 27.6655 141.553 27.0559 142.471 26.2758C143.265 25.578 143.911 24.7279 144.371 23.7758C144.837 22.8601 145.173 21.8841 145.371 20.8758C145.54 19.919 145.607 18.9468 145.571 17.9758V17.0758C145.613 16.2373 145.545 15.397 145.371 14.5758C145.266 13.755 145.065 12.9494 144.771 12.1758V12.1758ZM140.571 17.6758C140.571 21.4758 138.471 23.3758 134.371 23.3758H124.571L129.371 18.5758V11.7758H134.371C138.471 11.7758 140.571 13.6758 140.571 17.4758V17.6758Z" fill="white"/>
<g clipPath={"url(#cn-square__hide)"}>
<g id={styles["cn"]} className={joinClasses("_8")}>
<rect id={styles["cn-square"]} x="147.327" y="6.57262" width="22.4" height="22.4032" fill="white"/>
<path className={styles["a"]} id={styles["arknights-cn-char-1-1"]} d="M148.257 20.8689H148.607V19.9108H148.046V21.0091H148.257V20.8689ZM148.257 20.0978H148.397V20.2847H148.257V20.0978ZM148.257 20.4717H148.397V20.6586H148.257V20.4717Z" fill="black"/>
<path className={styles["a"]} id={styles["arknights-cn-char-1-2"]} d="M148.467 21.1727L148.654 21.3129C148.788 21.18 148.878 21.0085 148.911 20.8222H149.191V21.0559H148.958C148.992 21.1302 149.015 21.2088 149.028 21.2895L149.331 21.2428C149.402 21.1961 149.425 21.1493 149.425 21.0325V19.8875H148.724V20.4483C148.738 20.5806 148.722 20.7144 148.678 20.8398C148.633 20.9651 148.561 21.0789 148.467 21.1727V21.1727ZM148.934 20.0978H149.191V20.238H148.934V20.0978ZM148.934 20.4483H149.191V20.6119H148.934V20.4483Z" fill="black"/>
<path className={styles["a"]} id={styles["arknights-cn-char-2"]} d="M149.799 21.1727H150.453V21.2895H150.687V19.9108H149.565V21.2895H149.799V21.1727ZM149.799 20.1445H150.453V20.4249H149.799V20.1445ZM149.799 20.6586H150.453V20.9624H149.799V20.6586Z" fill="black"/>
<path className={styles["a"]} id={styles["arknights-cn-char-3"]} d="M150.804 21.126C150.87 21.1768 150.926 21.2404 150.967 21.3129C151.087 21.2456 151.189 21.1514 151.266 21.0379C151.343 20.9244 151.393 20.7946 151.411 20.6586H151.879C151.855 20.8923 151.832 21.0325 151.785 21.0559H151.435C151.486 21.1243 151.518 21.2048 151.528 21.2895H151.785C151.864 21.2829 151.938 21.25 151.995 21.1961C152.079 20.9884 152.119 20.7656 152.112 20.5418V20.4483H151.435C151.452 20.3956 151.46 20.3402 151.458 20.2847H152.252V20.051H151.622L151.715 20.0043L151.598 19.794L151.388 19.8875L151.458 20.051H150.827V20.2847H151.201C151.222 20.4482 151.195 20.6143 151.125 20.7633C151.055 20.9124 150.943 21.0382 150.804 21.126" fill="black"/>
<path className={styles["a"]} id={styles["arknights-cn-char-4"]} d="M152.229 20.7053H152.416C152.411 20.7917 152.387 20.876 152.347 20.9526C152.307 21.0291 152.251 21.0962 152.182 21.1493C152.259 21.185 152.324 21.2417 152.369 21.3129C152.536 21.1533 152.637 20.9361 152.65 20.7053H153.234V21.0559H153.047C153.067 21.1271 153.09 21.1973 153.117 21.2662H153.374C153.444 21.2194 153.468 21.1727 153.468 21.0559V20.7053H153.655V20.495H153.468V20.0043H153C153.04 19.9552 153.072 19.9 153.094 19.8407H152.813C152.806 19.9048 152.79 19.9677 152.767 20.0277H152.439V20.495H152.229V20.7053ZM153.234 20.1912V20.495H153L153.117 20.3782L152.907 20.1912H153.234ZM152.673 20.4249V20.1912H152.883L152.743 20.3081L152.953 20.495H152.673V20.4249ZM152.743 20.7754C152.839 20.8324 152.925 20.9033 153 20.9858L153.14 20.8455C153.063 20.7901 152.976 20.7504 152.883 20.7287L152.743 20.7754Z" fill="black"/>
<path className={styles["e-chr1"]} id={styles["endfield-cn-chr1-main-t"]} d="M150.71 22.9487H150.243L147.953 26.6363V27.3642L150.734 26.4772V26.2907L152.813 25.0284L155.173 26.6408V25.3789L153.701 24.3975L154.987 23.5095V22.2243H152.556L153.024 21.6167H151.715L150.71 22.9487Z" fill="black"/>
<path className={styles["e-chr1"]} id={styles["endfield-cn-chr1-main-t-inner-l"]} d="M150.534 25.7863L149.615 25.7863L150.534 24.2674H150.743L151.313 23.7031L152.192 24.4885L150.534 25.5728V25.7863Z" fill="white"/>
<path className={styles["e-chr1"]} id={styles["endfield-cn-chr1-main-t-inner-r"]} d="M153.009 23.8041L152.34 23.324H153.678L153.009 23.8041Z" fill="white"/>
<path className={styles["e-chr1"]} id={styles["endfield-cn-chr1-main-b"]} d="M151.803 26.1079L150.935 26.6598L153.371 28.5853H155.101V27.227L154.235 27.8283L151.803 26.1079Z" fill="black"/>
<path className={styles["e-chr1"]} id={styles["endfield-cn-chr1-stroke-tl-1"]} d="M150.676 21.6167H149.284L147.976 23.7138V24.6311H148.844L150.676 21.6167Z" fill="black"/>
<path className={styles["e-chr1"]} id={styles["endfield-cn-chr1-stroke-br-1"]} d="M152.86 25.3322L151.927 25.9583L154.122 27.5287V26.1968L152.86 25.3322Z" fill="black"/>
<path className={styles["e-chr1"]} id={styles["endfield-cn-chr1-stroke-bl-1"]} d="M150.72 26.8067V27.7531L147.934 28.6404V27.6954L150.72 26.8067Z" fill="black"/>
<path className={styles["e-chr2"]} id={styles["endfield-cn-chr2"]} d="M154.982 22.2242H157.951V21.5699H159.28V22.2242H162.249V23.2992H159.28V23.9768H161.571V25.0517H159.28V25.2621L162.201 27.2834V28.6387L159.28 26.559V28.6228H157.951V26.5847L155.1 28.5843V27.227L157.951 25.2597V25.0494H155.661V23.9745H157.951V23.2968H154.982" fill="black"/>
<path className={styles["e-chr2"]} id={styles["patch"]} d="M155.22 27.1466L155.136 28.5525L155.1 28.5788H155.064V27.2538L155.22 27.1466Z" fill="black"/>
<path className={styles["e-chr2"]} id={styles["patch"]} d="M154.911 22.234H155.047V23.2956L154.911 23.2992V22.234Z" fill="black"/>
<path className={styles["e-chr3"]} id={styles["endfield-cn-chr3-1"]} d="M164.567 23.2595H163.89V21.8971H162.675V23.2595H162.114V24.34H162.675V26.313L161.95 26.5714V28.0982L164.567 27.1351V25.6084L163.89 25.8667V24.34H164.567V23.2595Z" fill="black"/>
<path className={styles["e-chr3"]} id={styles["endfield-cn-chr3-2"]} d="M164.147 24.3668V25.6476L164.754 25.414V28.1013L165.806 28.6387H169.334V27.5404H165.993V24.9466L166.273 24.8298V27.2834L167.488 26.7693V24.3624L167.815 24.2456V26.6524L169.031 26.1617V22.4696L167.488 23.0538V21.6284H166.273V23.5212L165.993 23.638V22.3995H164.754V24.1054L164.147 24.3668Z" fill="black"/>
</g>
</g>
</motion.svg>
);
};

33
components/logo/Hypergryph/Hypergryph.module.scss Normal file
View File

@ -0,0 +1,33 @@
@import "styles/anims";
.HGLogo {
aspect-ratio: 150 / 60;
path {
fill: #fff;
}
&:not([data-noanim])
{
#hg-txt, #network-tech {
opacity: 0;
transform: translateY(10px);
animation:
opacity_spawn 0s 1.9s linear forwards,
slide_DU 1s 1.3s $forceful forwards;
}
#hg {
transform: translateX(50%);
animation:
HGMove 0.8s 0.5s $forceful forwards,
HGAwake 1s 1.3s $forceful forwards;
}
}
}
@keyframes HGAwake {
from { d: path("M4.9 31.4L6.4 35.6L6.6 34.2L6.4 28.3L6.8 26.3L5.8 22.9L0 18.5L4.1 22.4V23L5.1 25.9L4.2 30.6L4.9 31.4ZM7.9 8V13.1L7.7 14.2L8.2 15.2L8.9 17.8L9.5 18.4L8.3 8L7.3 5.8V6.2L7.9 8ZM28.9 15.3L25.2 22.4L25.8 21.8L29.7 18.4L30.2 18L31 16.8L32.1 10.3L30.9 8.1L29.6 4.9L26.7 0L29.1 5.4L30.5 9.7L29.3 14.7L28.9 15.3ZM32.6 43.9L28.1 43.1L26.5 43.4L25.5 44.1L23.7 44.5L18.3 46.2H21.3L24.3 46.9V47.5L26 51.2L29.2 46.9L29.7 46L30.4 46.2L35.6 47.7L33.2 45.7L32.5 45.3L36 44.5L32.6 43.9ZM41.4 2.3V1.7L38.1 8.9L36.9 11.4L30.4 18.4L25.2 22.8L20.3 25.6L18.9 29.9L19.7 25.5L18.1 21.6L17.3 21L13 16.4L16.6 21.4L17.9 25.1L17.2 28.2L16.9 28.9L14.3 31.6L11.9 33.2L11.2 34.1L10.8 32.6L11 30.5L11.2 30.1L10.1 28L9.5 24.1L9.2 19L8.8 18.4L7.9 15.3L6 10.9L3.2 5.8V6.5L4.9 9.9L6.9 16.5L7.2 18.5L7.4 20V25L6.8 28.5V34.9L6.2 40.3L5.8 41.9L6.5 43.6L5.8 48.8V49.2L5 50.1L4.7 53.2V59.2H5L6.3 57L9.9 51.9L10.6 51.4L10.8 51.2L14.5 50L14.8 49.3L18.5 47.3L19.1 46.8L17.4 46.3L23.3 44.3L25.4 43.7L26.3 43L29.6 42.3L34.4 43.1H34.9L31.2 41.4L30.7 40.9L23.7 37.8H23.1L22.2 38L23 37.6L29.2 37L30.3 36H29.5L22.1 33.7L20.7 35.3L21 34.6L23.2 31L23.7 29L32.1 20.7L36.4 15L38.7 10L41.4 2.3ZM13.9 42.7L12.3 45L12 45.2L13.786 42.744L14 40.2L13.9 42.7Z") }
to { d: path("M4.9 31.4L6.4 35.6L6.6 34.2L6.4 28.3L6.8 26.3L5.8 22.9L0 18.5L4.1 22.4V23L5.1 25.9L4.2 30.6L4.9 31.4ZM7.9 8V13.1L7.7 14.2L8.2 15.2L8.9 17.8L9.5 18.4L8.3 8L7.3 5.8V6.2L7.9 8ZM28.9 15.3L25.2 22.4L25.8 21.8L29.7 18.4L30.2 18L31 16.8L32.1 10.3L30.9 8.1L29.6 4.9L26.7 0L29.1 5.4L30.5 9.7L29.3 14.7L28.9 15.3ZM32.6 43.9L28.1 43.1L26.5 43.4L25.5 44.1L23.7 44.5L18.3 46.2H21.3L24.3 46.9V47.5L26 51.2L29.2 46.9L29.7 46L30.4 46.2L35.6 47.7L33.2 45.7L32.5 45.3L36 44.5L32.6 43.9ZM41.4 2.3V1.7L38.1 8.9L36.9 11.4L30.4 18.4L25.2 22.8L20.3 25.6L18.9 29.9L19.7 25.5L18.1 21.6L17.3 21L13 16.4L16.6 21.4L17.9 25.1L17.2 28.2L16.9 28.9L14.3 31.6L11.9 33.2L11.2 34.1L10.8 32.6L11 30.5L11.2 30.1L10.1 28L9.5 24.1L9.2 19L8.8 18.4L7.9 15.3L6 10.9L3.2 5.8V6.5L4.9 9.9L6.9 16.5L7.2 18.5L7.4 20V25L6.8 28.5V34.9L6.2 40.3L5.8 41.9L6.5 43.6L5.8 48.8V49.2L5 50.1L4.7 53.2V59.2H5L6.3 57L9.9 51.9L10.6 51.4L10.8 51.2L14.5 50L14.8 49.3L18.5 47.3L19.1 46.8L17.4 46.3L23.3 44.3L25.4 43.7L26.3 43L29.6 42.3L34.4 43.1H34.9L31.2 41.4L30.7 40.9L23.7 37.8H23.1L22.2 38L23 37.6L29.2 37L30.3 36H29.5L22.1 33.7L20.7 35.3L21 34.6L23.2 31L23.7 29L32.1 20.7L36.4 15L38.7 10L41.4 2.3ZM13.9 42.7L12.3 45L12 45.2L12.5 43.3L14 40.2L13.9 42.7Z") }
}
@keyframes HGMove {
to { transform: translateX(0) }
}

44
components/logo/Hypergryph/Hypergryph.tsx Normal file
View File

File diff suppressed because one or more lines are too long

24
components/logo/IntroLogo.tsx Normal file
View File

@ -0,0 +1,24 @@
import { HypergryphLogo } from "@components/logo/Hypergryph/Hypergryph";
import { MountainContourLogo } from "@components/logo/MountainContour/MountainContour";
import {HasAnimation, joinClasses} from "@utils/common";
import { FC } from "react";
import { motion } from "framer-motion";
export const IntroLogo: FC<HasAnimation> = ({dontAnimateChild= null}) => {
return (
<motion.div
initial={{opacity: 0}}
animate={{opacity: 1}}
exit={{opacity: 0}}
transition={{
duration: 0.5,
ease: [0.88,-0.07, 0.22, 1.01]
}}
className={joinClasses("flex flex-row")}
style={{width: 'min(850px, 90vw)'}}
>
<HypergryphLogo dontAnimateChild={dontAnimateChild} overrideStyles={{width: '55%'}}/>
<MountainContourLogo dontAnimateChild={dontAnimateChild} overrideStyles={{width: '45%'}}/>
</motion.div>
);
};

91
components/logo/JP/JP-big.module.scss Normal file
View File

@ -0,0 +1,91 @@
@import 'styles/anims';
@import 'styles/orders';
@import '../logoAnimFunc';
@import './JP.anim';
.logo {
width: clamp(700px, 100%, 2000px);
height: clamp(400px, 80%, 500px);
path, rect {
fill: #fff;
&[data-inverse] {
fill: #000;
}
}
&:not([data-noanim])
{
$logo-anim-delay: 0s;
.arknights {
$delay: StaggeredAnimDelay($logo-anim-delay);
opacity: 0;
transform: translateY(-10px);
animation:
opacity_spawn applyPlaybackSpeed(0.5s) applyPlaybackSpeed(#{$delay}) steps(1) forwards,
slide_UD applyPlaybackSpeed(0.8s) applyPlaybackSpeed(#{$delay}) $forceful forwards,
char-stroke applyPlaybackSpeed(0.5s) applyPlaybackSpeed(calc(#{$delay} + 0.4s)) steps(1) forwards;
}
.endfield {
$delay: StaggeredAnimDelay($logo-anim-delay, 0.5s);
opacity: 0;
transform: translateY(-10px);
animation:
opacity_spawn applyPlaybackSpeed(0.5s) applyPlaybackSpeed(#{$delay}) steps(1) forwards,
slide_UD applyPlaybackSpeed(0.8s) applyPlaybackSpeed(#{$delay}) $forceful forwards;
&.chr2_1, &.chr2_2, &.chr2_3 {
$delay: StaggeredAnimDelay($logo-anim-delay, 1.05s);
}
&.chr1_1, &.chr2_1, &.chr2_2, &.chr2_3 {
transform: translateX(-10px);
animation:
opacity_spawn applyPlaybackSpeed(0.5s) applyPlaybackSpeed(#{$delay}) steps(1) forwards,
slide_LR applyPlaybackSpeed(0.8s) applyPlaybackSpeed(#{$delay}) $forceful forwards,
}
&.chr1_2-stroke-long {
transform-origin: 25px 31px;
transform: rotate(17deg);
animation:
opacity_spawn applyPlaybackSpeed(0.2s) applyPlaybackSpeed(#{$delay}) steps(1) forwards,
char-stroke applyPlaybackSpeed(0.5s) applyPlaybackSpeed(calc(#{$delay} - 0.05s)) steps(1) forwards,
reset-rotate applyPlaybackSpeed(0.5s) applyPlaybackSpeed(calc(#{$delay} + 0.5s)) $forceful forwards;
}
&.chr1_2-stroke-short {
$delay: StaggeredAnimDelay($logo-anim-delay, 0.8s);
transform-origin: bottom center;
transform: scaleY(3);
@keyframes reset-transform {
to { transform: scaleY(1) translateY(0); }
}
animation:
char-stroke applyPlaybackSpeed(0.8s) applyPlaybackSpeed(#{$delay}) steps(1) forwards,
opacity_spawn applyPlaybackSpeed(0.5s) applyPlaybackSpeed(#{$delay}) steps(1) forwards,
reset-transform applyPlaybackSpeed(1s) applyPlaybackSpeed(#{$delay}) cubic-bezier(0, 0.84, 0.41, 0.98) forwards;
}
&.chr1_3-main { animation-delay: applyPlaybackSpeed(calc(#{$delay} + 0.35s)); }
&.chr1_3-dot-1 { animation-delay: applyPlaybackSpeed(calc(#{$delay} + 0.45s)); }
&.chr1_3-dot-2 { animation-delay: applyPlaybackSpeed(calc(#{$delay} + 0.5s)); }
&.chr3_2-main { animation-delay: applyPlaybackSpeed(calc(#{$delay} + 0.25s)); }
&.chr3_2-dot-1 { animation-delay: applyPlaybackSpeed(calc(#{$delay} + 0.35s)); }
&.chr3_2-dot-2 { animation-delay: applyPlaybackSpeed(calc(#{$delay} + 0.43s)); }
&.chr3_1-l {
transform: translateY(10px);
animation:
opacity_spawn applyPlaybackSpeed(0.5s) applyPlaybackSpeed(calc(#{$delay} + 0.2s)) steps(1) forwards,
slide_DU applyPlaybackSpeed(0.8s) applyPlaybackSpeed(calc(#{$delay} + 0.2s)) $forceful forwards;
}
&.chr3_1-r { animation-delay: calc(#{$delay} + 0.3s); }
}
#ak-cn {
$delay: StaggeredAnimDelay($logo-anim-delay, 0.01s);
.arknights-cn { @extend ._2 }
.endfield-cn { @extend ._3 }
.arknights-cn, .endfield-cn {
$delay: StaggeredAnimDelay($logo-anim-delay, calc(2s + var(--order)));
animation:
slide_RL applyPlaybackSpeed(1s) applyPlaybackSpeed(#{$delay}) $forceful forwards;
}
}
}
}

86
components/logo/JP/JP-big.tsx Normal file
View File

@ -0,0 +1,86 @@
import { FC, useEffect, useRef, useState } from "react";
import { HasAnimation, joinClasses, whichWider } from "@utils/common";
import { motion } from "framer-motion";
import styles from "./JP-big.module.scss";
import { Forceful } from "@utils/anims";
export const LogoLarge_JP: FC<HasAnimation> = ({ dontAnimateChild = null}) => {
const mode = useRef("fh");
const [isExiting, setIsExiting] = useState(false);
useEffect(() => {
mode.current = whichWider() === "width" ? "fw" : "fh";
}, []);
return (
<motion.svg
initial={{ opacity: 0 }}
animate={{
opacity: 1,
y: 0
}}
exit={{
opacity: 0,
y: dontAnimateChild ? 0 : 20,
}}
transition={{
duration: isExiting ? 0.5 : 0.3,
ease: Forceful
}}
data-logo={""}
data-noanim={dontAnimateChild}
className={joinClasses(styles.logo, mode.current, "abs")}
viewBox="0 0 69 77"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<clipPath id={"cn-square__hide"}>
<rect x="45.7979" y="54.0741" width="22.7" height="22.7"/>
</clipPath>
</defs>
<path className={joinClasses("_1", styles["arknights"], styles["chr1"])} d="M0.897949 5.77411L1.79795 6.57411C2.36939 6.18332 2.84745 5.67112 3.19795 5.07411C3.54251 4.14668 3.71204 3.16338 3.69795 2.17411H5.09795L3.69795 3.47411L4.59795 4.27411L6.79795 1.77411L6.09795 1.17411H1.09795V2.17411H2.69795C2.70358 2.71402 2.6363 3.25221 2.49795 3.77411C2.38914 4.20223 2.1901 4.60215 1.91416 4.94708C1.63821 5.29201 1.29174 5.57399 0.897949 5.77411"/>
<path className={joinClasses("_2", styles["arknights"], styles["chr2"])} d="M5.89795 4.17411H11.3979V3.17411H5.89795V4.17411Z"/>
<path className={joinClasses("_3", styles["arknights"], styles["chr3"])} d="M13.6979 2.77409H15.3979C14.9979 4.87409 12.1979 5.67409 12.1979 5.67409L12.8979 6.67409C13.7984 6.35644 14.6178 5.8443 15.2979 5.17409C16.016 4.35028 16.4995 3.34871 16.6979 2.27409L16.0979 1.67409H14.2979L14.5979 1.17409L13.5979 0.77409C13.2057 1.82096 12.5092 2.72648 11.5979 3.37409L12.2979 4.17409C12.8427 3.79267 13.3165 3.31885 13.6979 2.77409Z"/>
<path className={joinClasses("_4", styles["arknights"], styles["chr4"])} d="M18.7979 4.87408C18.4425 5.31937 17.9506 5.63558 17.3979 5.77408L18.0979 6.67408C18.7353 6.4882 19.2962 6.10262 19.6979 5.57408C20.1286 4.9645 20.3077 4.21234 20.1979 3.47408H22.2979V2.47408H20.1979V1.07408H19.1979V2.47408H16.9979V3.47408H19.1979C19.1858 3.96717 19.0482 4.44902 18.7979 4.87408Z"/>
<path className={joinClasses("_5", styles["arknights"], styles["chr5"])} d="M22.418 4.95407C23.0585 4.69966 23.6635 4.36355 24.218 3.95407V6.47407H25.218V3.17407C25.8241 2.72554 26.3571 2.1858 26.798 1.57407L25.998 0.874065C24.9005 2.26454 23.4501 3.33509 21.798 3.97407L22.398 4.97407"/>
<path className={joinClasses("_6", styles["arknights"], styles["chr6-stroke-short-1"])} d="M27.7979 4.1741L28.7979 3.7741C28.7702 2.92698 28.4525 2.11506 27.8979 1.4741L26.8979 1.8741C27.4312 2.44933 27.7492 3.19124 27.7979 3.9741"/>
<path className={joinClasses("_6", styles["arknights"], styles["chr6-stroke-short-2"])} d="M29.198 3.4741L30.198 3.0741C30.127 2.29669 29.812 1.56163 29.298 0.974102L28.298 1.2741C28.5853 1.56357 28.8127 1.9069 28.9672 2.28441C29.1216 2.66193 29.2 3.06622 29.198 3.4741Z"/>
<path className={joinClasses("_6", styles["arknights"], styles["chr6-stroke-long"])} d="M27.698 5.77408L28.398 6.67408C30.8328 5.47126 32.1517 3.68897 32.098 1.67408L30.998 1.07408C31.1824 1.90798 31.0091 2.7527 30.4905 3.54789C29.9719 4.34307 29.1208 5.06909 27.998 5.67408"/>
<path className={joinClasses("_1", styles["endfield"], styles["chr1_1"])} d="M23.5979 26.0741H14.4979V12.4741H19.7979L23.5979 7.97411H0.897949V12.4741H9.99795V26.0741H0.897949V30.5741H23.5979V26.0741Z"/>
<path className={joinClasses("_2", styles["endfield"], styles["chr1_2-stroke-long"])} d="M47.4979 22.2741V7.87407H43.0979V20.5741L24.8979 26.0741V30.5741L47.4979 23.7741V22.2741Z"/>
<path className={joinClasses("_2", styles["endfield"], styles["chr1_2-stroke-short"])} d="M26.698 13.6741L38.898 17.5741V13.0741L32.798 11.0741L26.698 9.17412V13.6741Z"/>
<path className={joinClasses("_3", styles["endfield"], styles["chr1_3-main"])} d="M53.3979 19.2741L66.8979 23.4741V19.2741L53.298 14.9741V7.87407H48.798V30.5741H53.298L53.3979 19.2741Z"/>
<path className={joinClasses("_3", styles["endfield"], styles["chr1_3-dot-1"])} d="M60.7979 7.97411H56.0979V12.4741H60.7979V7.97411Z"/>
<path className={joinClasses("_3", styles["endfield"], styles["chr1_3-dot-2"])} d="M66.7979 7.97411H62.0979V12.4741H66.7979V7.97411Z"/>
<path className={joinClasses("_4", styles["endfield"], styles["chr2_1"])} d="M0.897949 31.7741H0.997949V36.2741H16.9979C15.5979 40.3741 11.8979 46.0741 2.59795 47.8741V53.3741C3.71964 53.3209 4.82931 53.1191 5.89795 52.7741C10.9979 51.3741 19.9979 46.7741 23.5979 31.8741L0.897949 31.7741Z"/>
<path className={joinClasses("_5", styles["endfield"], styles["chr2_2"])} d="M41.5979 30.9741L26.3979 35.5741V40.4741L32.1979 38.6741V49.3741H36.4979V37.3741L41.5979 35.7741V30.9741Z"/>
<path className={joinClasses("_6", styles["endfield"], styles["chr2_3"])} d="M68.4979 39.8741H44.0979V44.3741H64.6979L68.4979 39.8741Z"/>
<path className={joinClasses("_7", styles["endfield"], styles["chr3_1-l"])} d="M6.99795 65.9741C6.99795 71.1741 1.59795 71.3741 1.59795 71.3741V76.5741C11.6979 75.0741 11.5979 67.4741 11.5979 67.4741V53.9741H6.99795V65.9741Z"/>
<path className={joinClasses("_7", styles["endfield"], styles["chr3_1-r"])} d="M17.8979 70.9741V53.9741H13.3979V76.6741C21.4979 75.5741 23.8979 70.9741 23.8979 70.9741V65.7741C22.2778 67.9025 20.2351 69.6729 17.8979 70.9741Z"/>
<path className={joinClasses("_8", styles["endfield"], styles["chr3_2-main"])} d="M29.998 53.9741H25.298V76.6741H29.798V65.5741L43.398 70.0741V65.5741L29.998 61.2741V53.9741Z"/>
<path className={joinClasses("_8", styles["endfield"], styles["chr3_2-dot-1"])} d="M32.698 58.5741H37.398V54.0741H32.698V58.5741Z"/>
<path className={joinClasses("_8", styles["endfield"], styles["chr3_2-dot-2"])} d="M38.798 58.5741H43.4979V54.0741H38.798V58.5741Z"/>
<g clipPath={"url(#cn-square__hide)"}>
<g id={styles["ak-cn"]}>
<rect className={joinClasses(styles["square"], "_1")} x="45.7979" y="54.0741" width="22.7" height="22.7"/>
<path className={joinClasses(styles["arknights-cn"], styles["char-1-1"])} d="M46.7401 68.5618H47.0953V67.5909H46.527V68.7039H46.7401V68.5618ZM46.7401 67.7804H46.8822V67.9698H46.7401V67.7804ZM46.7401 68.1593H46.8822V68.3487H46.7401V68.1593Z" data-inverse={""}/>
<path className={joinClasses(styles["arknights-cn"], styles["char-1-2"])} d="M46.9533 68.8697L47.1427 69.0118C47.279 68.8771 47.3701 68.7033 47.4032 68.5145H47.6874V68.7513H47.4506C47.485 68.8266 47.5089 68.9063 47.5216 68.9881L47.8294 68.9407C47.9005 68.8934 47.9242 68.846 47.9242 68.7276V67.5673H47.2137V68.1356C47.2281 68.2697 47.2121 68.4052 47.167 68.5323C47.122 68.6594 47.0489 68.7747 46.9533 68.8697ZM47.4269 67.7804H47.6874V67.9225H47.4269V67.7804ZM47.4269 68.1356H47.6874V68.3014H47.4269V68.1356Z" data-inverse={""}/>
<path className={joinClasses(styles["arknights-cn"], styles["char-2"])} d="M48.3031 68.8697H48.9661V68.9881H49.2029V67.5909H48.0663V68.9881H48.3031V68.8697ZM48.3031 67.8277H48.9661V68.1119H48.3031V67.8277ZM48.3031 68.3487H48.9661V68.6566H48.3031V68.3487Z" data-inverse={""}/>
<path className={joinClasses(styles["arknights-cn"], styles["char-3"])} d="M49.3214 68.8223C49.3886 68.8739 49.445 68.9383 49.4871 69.0118C49.6082 68.9435 49.7119 68.8481 49.79 68.7331C49.868 68.6181 49.9184 68.4865 49.937 68.3487H50.4107C50.387 68.5855 50.3633 68.7276 50.3159 68.7513H49.9607C50.0124 68.8207 50.045 68.9023 50.0555 68.9881H50.3159C50.3956 68.9814 50.4707 68.948 50.5291 68.8934C50.6142 68.683 50.6545 68.4572 50.6475 68.2303V68.1356H49.9607C49.9784 68.0822 49.9864 68.0261 49.9844 67.9698H50.7896V67.733H50.1502L50.2449 67.6857L50.1265 67.4725L49.9134 67.5673L49.9844 67.733H49.345V67.9698H49.7239C49.7451 68.1355 49.7184 68.3038 49.6471 68.4548C49.5757 68.6059 49.4627 68.7334 49.3214 68.8223Z" data-inverse={""}/>
<path className={joinClasses(styles["arknights-cn"], styles["char-4"])} d="M50.7659 68.3961H50.9553C50.9502 68.4836 50.9264 68.569 50.8855 68.6466C50.8447 68.7242 50.7877 68.7922 50.7185 68.846C50.7961 68.8821 50.8619 68.9396 50.908 69.0118C51.0773 68.85 51.1789 68.6299 51.1921 68.3961H51.7841V68.7513H51.5947C51.6148 68.8235 51.6385 68.8946 51.6657 68.9644H51.9262C51.9973 68.917 52.0209 68.8697 52.0209 68.7513V68.3961H52.2104V68.1829H52.0209V67.6856H51.5473C51.5877 67.6359 51.6197 67.5799 51.6421 67.5199H51.3579C51.3506 67.5849 51.3347 67.6486 51.3105 67.7093H50.979V68.1829H50.7659V68.3961ZM51.7841 67.8751V68.1829H51.5473L51.6657 68.0645L51.4526 67.8751H51.7841ZM51.2158 68.1119V67.8751H51.4289L51.2868 67.9935L51.5 68.1829H51.2158V68.1119ZM51.2868 68.4671C51.3838 68.5248 51.4716 68.5967 51.5473 68.6802L51.6894 68.5382C51.6112 68.482 51.5227 68.4418 51.4289 68.4198L51.2868 68.4671Z" data-inverse={""}/>
<path className={joinClasses(styles["endfield-cn"], styles["chr1-main-t"])} d="M49.2266 70.6694H48.7527L46.4323 74.4065V75.1441L49.2503 74.2452V74.0562L51.3579 72.777L53.7497 74.411V73.1322L52.2578 72.1377L53.5602 71.2378V69.9353H51.0974L51.571 69.3196H50.2449L49.2266 70.6694Z" data-inverse={""}/>
<path className={joinClasses(styles["endfield-cn"], styles["chr1-main-t-inner-l"])} d="M49.0476 73.5451L48.1166 73.5451L49.0476 72.0058H49.2599L49.8374 71.434L50.7286 72.2299L49.0476 73.3288V73.5451Z"/>
<path className={joinClasses(styles["endfield-cn"], styles["chr1-main-t-inner-r"])} d="M51.5562 71.5364L50.8782 71.0498H52.2342L51.5562 71.5364Z"/>
<path className={joinClasses(styles["endfield-cn"], styles["chr1-main-b"])} d="M50.3339 73.871L49.4541 74.4303L51.9226 76.3816H53.6762V75.005L52.7988 75.6144L50.3339 73.871Z" data-inverse={""}/>
<path className={joinClasses(styles["endfield-cn"], styles["chr1-stroke-tl-1"])} d="M49.1923 69.3196H47.7812L46.456 71.4448V72.3745H47.3352L49.1923 69.3196Z" data-inverse={""}/>
<path className={joinClasses(styles["endfield-cn"], styles["chr1-stroke-br-1"])} d="M51.4053 73.0849L50.4598 73.7194L52.684 75.3109V73.9611L51.4053 73.0849Z" data-inverse={""}/>
<path className={joinClasses(styles["endfield-cn"], styles["chr1-stroke-bl-1"])} d="M49.2368 74.5791V75.5382L46.4136 76.4374V75.4797L49.2368 74.5791Z" data-inverse={""}/>
<path className={joinClasses(styles["endfield-cn"], styles["chr2-main"])} d="M53.5556 69.9353H56.5642V69.2723H57.9117V69.9353H60.9203V71.0246H57.9117V71.7114H60.2324V72.8007H57.9117V73.0138L60.8718 75.0622V76.4357L57.9117 74.3281V76.4196H56.5642V74.3542L53.6752 76.3806V75.005L56.5642 73.0115V72.7983H54.2435V71.709H56.5642V71.0223H53.5556" data-inverse={""}/>
<path className={joinClasses(styles["endfield-cn"], styles["chr2-patch-b"])} d="M53.7972 74.9236L53.7121 76.3483L53.6751 76.375H53.639V75.0322L53.7972 74.9236Z" data-inverse={""}/>
<path className={joinClasses(styles["endfield-cn"], styles["chr2-patch-t"])} d="M53.4836 69.9452H53.6214V71.021L53.4836 71.0247V69.9452Z" data-inverse={""}/>
<path className={joinClasses(styles["endfield-cn"], styles["chr3-1"])} d="M63.2693 70.9844H62.5826V69.6038H61.3512V70.9844H60.7828V72.0794H61.3512V74.0789L60.6171 74.3407V75.8879L63.2693 74.912V73.3648L62.5826 73.6266V72.0794H63.2693V70.9844Z" data-inverse={""}/>
<path className={joinClasses(styles["endfield-cn"], styles["chr3-2"])} d="M62.843 72.1065V73.4046L63.4587 73.1678V75.891L64.5244 76.4357H68.1002V75.3227H64.7138V72.6941L64.998 72.5757V75.0622L66.2294 74.5412V72.1021L66.5609 71.9837V74.4228L67.7923 73.9255V70.184L66.2294 70.776V69.3315H64.998V71.2496L64.7138 71.368V70.1129H63.4587V71.8416L62.843 72.1065Z" data-inverse={""}/>
</g>
</g>
</motion.svg>
);
};

106
components/logo/JP/JP-small.module.scss Normal file
View File

@ -0,0 +1,106 @@
@import "styles/anims";
@import "styles/orders";
@import '../logoAnimFunc';
$logo-anim-delay: 0s;
.logo {
path, rect {
fill: #fff;
&[data-inverse] {
fill: #000;
}
}
&:not([data-noanim]) {
//#region JP-"Arknights"
$arknights-cn-anim-delay: calc(#{$logo-anim-delay} + 0s);
.arknights {
opacity: 0;
transform: translateY(-10px);
$delay: StaggeredAnimDelay($arknights-cn-anim-delay);
animation:
opacity_spawn 0.5s #{$delay} steps(1) forwards,
slide_UD 0.8s #{$delay} $forceful forwards;
}
//#endregion
//#region JP-"Endfield"
$endfield-cn-anim-delay: calc(#{$logo-anim-delay} + 0.5s);
#chr1,
#chr4,
#chr5,
#chr6,
#chr7 {
opacity: 0;
transform: translateY(-10px);
$delay: StaggeredAnimDelay($endfield-cn-anim-delay);
animation:
opacity_spawn 0.5s #{$delay} steps(1) forwards,
slide_UD 0.8s #{$delay} $forceful forwards;
}
#chr2 {
$delay: StaggeredAnimDelay($endfield-cn-anim-delay);
#chr2-t {
opacity: 0;
transform: translateY(-10px);
animation:
opacity_spawn 0.5s #{$delay} steps(1) forwards,
slide_UD 0.8s #{$delay} $forceful forwards;
}
#chr2-b {
opacity: 0;
transform: translateY(10px);
animation:
opacity_spawn 0.5s #{$delay} steps(1) forwards,
slide_DU 0.8s #{$delay} $forceful forwards;
}
}
#chr3, #chr8 {
$delay: StaggeredAnimDelay($arknights-cn-anim-delay, 0.4s);
.main {
opacity: 0;
transform: translateY(10px);
animation:
opacity_spawn 0.5s #{$delay} steps(1) forwards,
slide_DU 0.8s #{$delay} $forceful forwards;
}
.sub-1, .sub-2 {
transform-origin: bottom center;
transform: scaleY(2) translateY(calc(8px));
opacity: 0;
@keyframes reset-transform {
to { transform: scaleY(1) translateY(0); }
}
animation:
reset-transform 0.5s #{$delay} $forceful forwards,
opacity_spawn 0.3s #{$delay} steps(1) forwards,
}
.sub-1 { animation-delay: calc(#{$delay} + 0.25s); }
.sub-2 { animation-delay: calc(#{$delay} + 0.3s); }
}
#chr9 {
$delay: StaggeredAnimDelay($endfield-cn-anim-delay, 0.28s);
clip-path: polygon(0 0, 0 0, 100% 0, 100% 0);
animation:
expand_UD 0.5s #{$delay} $forceful forwards;
.a { @extend ._1}
.e1 { @extend ._2 }
.e2 { @extend ._3 }
.e3 { @extend ._4 }
.a, .e1, .e2, .e3 {
$delay: StaggeredAnimDelay($endfield-cn-anim-delay, 0.53s);
opacity: 0;
transform: translateY(-10px);
animation:
opacity_spawn 0.5s #{$delay} steps(1) forwards,
slide_UD 0.8s #{$delay} $forceful forwards;
}
}
//#endregion
}
}

83
components/logo/JP/JP-small.tsx Normal file
View File

@ -0,0 +1,83 @@
import { FC } from "react";
import { HasAnimation, joinClasses } from "@utils/common";
import { LogoSmallProps } from "@components/logo/logo.types";
import { motion } from "framer-motion";
import styles from "@components/logo/JP/JP-small.module.scss";
import { Forceful } from "@utils/anims";
export const LogoSmall_JP: FC<HasAnimation & LogoSmallProps> = ({dontAnimateChild, opacity}) => {
return (
<motion.svg
fill="none"
initial={{ opacity: 1 }}
animate={{ opacity }}
exit={{ opacity: 0 }}
transition={{ duration: .5, ease: Forceful }}
data-logo={""}
viewBox="0 0 215 38"
xmlns="http://www.w3.org/2000/svg"
data-noanim={dontAnimateChild}
className={joinClasses(styles.logo, "fh")}
>
<defs>
<clipPath id={"cn-square__hide"}>
<rect x="187.956" y="10.4616" width="26.6" height="26.6"/>
</clipPath>
</defs>
<path className={joinClasses(styles["arknights"], "_1")} d="M2.12245 9.41732L0.922455 8.21732C1.50187 7.94173 2.01044 7.53705 2.40914 7.03435C2.80784 6.53164 3.08606 5.94427 3.22245 5.31732C3.46405 4.57602 3.53247 3.78919 3.42245 3.01732H1.12245V1.51732H8.42245L9.42245 2.41732L6.22246 6.01732L4.92245 4.91732L6.92245 3.01732H5.02245C5.07149 4.45939 4.79818 5.89425 4.22245 7.21732C3.66764 8.07667 2.95509 8.82316 2.12245 9.41732Z"/>
<path className={joinClasses(styles["arknights"], "_2")} d="M16.0565 5.91732H8.05646V4.41732H16.0565V5.91732Z"/>
<path className={joinClasses(styles["arknights"], "_3")} d="M21.8565 3.81732H19.4565C18.8891 4.60564 18.2162 5.31225 17.4565 5.91732L16.3565 4.71732C17.6646 3.77501 18.6439 2.44588 19.1565 0.917318L20.6565 1.51732L20.2565 2.21732H22.8565L23.6565 3.01732C23.3958 4.60666 22.704 6.09401 21.6565 7.31732C20.6711 8.23257 19.516 8.946 18.2565 9.41732L17.2565 8.01732C17.2565 8.01732 21.1565 6.91732 21.8565 3.81732Z"/>
<path className={joinClasses(styles["arknights"], "_4")} d="M31.8564 4.91732H28.7564C28.7564 5.95056 28.4794 7.03753 27.8745 7.91277C27.2898 8.6251 26.7143 9.18046 25.8564 9.51732L24.7564 8.21732C25.5258 7.96738 26.2157 7.51897 26.7564 6.91732C27.1629 6.34404 27.2188 5.61732 27.2564 4.91732H24.1564V3.31732H27.2564V1.31732H28.7564V3.31732H31.8564V4.91732Z"/>
<path className={joinClasses(styles["arknights"], "_5")} d="M34.5565 5.61732C33.7458 6.18122 32.8735 6.65092 31.9564 7.01732L31.1564 5.61732C33.543 4.6678 35.6199 3.07556 37.1565 1.01732L38.3565 2.01732C37.7158 2.92921 36.9403 3.73845 36.0565 4.41732V9.21732H34.5565V5.61732Z"/>
<g className={joinClasses(styles["arknights"], "_6")}>
<path d="M40.5565 9.31732L39.5565 8.01732C40.9027 7.50803 42.1286 6.72484 43.1565 5.71732C44.3565 4.41732 44.3565 1.41732 44.3565 1.41732L46.0565 1.81732C45.9305 3.52546 45.4311 5.16554 44.423 6.58301C43.3565 7.72712 42.0343 8.70609 40.5565 9.31732Z"/>
<path d="M43.3565 4.21732L41.8565 4.81732C41.8201 3.65906 41.3572 2.55505 40.5565 1.71732L42.0565 1.11732C42.797 1.99314 43.2508 3.07524 43.3565 4.21732Z"/>
<path d="M41.2565 4.91732L39.7565 5.61732C39.7352 4.4263 39.2719 3.28572 38.4565 2.41732L39.9565 1.91732C40.7073 2.74755 41.1641 3.80175 41.2565 4.91732Z"/>
</g>
<path id={styles["chr1"]} className={"_1"} d="M26.7565 10.6616L22.4565 15.7616H16.3565V31.3616H26.7565V36.4616H0.856453V31.3616H11.2565V15.7616H0.856453V10.6616H26.7565Z"/>
<g id={styles["chr2"]} className={"_2"}>
<path id={styles["chr2-t"]} d="M28.2565 36.4616V30.6616L54.1565 22.96V28.7616L28.2565 36.4616Z"/>
<path id={styles["chr2-b"]} d="M30.3565 17.1616V11.9616L44.2565 16.4616V21.5616L30.3565 17.1616Z"/>
</g>
<g id={styles["chr3"]} className={"_3"}>
<path className={styles["main"]} d="M55.6564 10.4616H60.7565V18.6616L76.1565 23.5616V28.6616L60.7565 23.7616V36.4616H55.6564V10.4616Z"/>
<path className={styles["sub-1"]} d="M63.9565 10.6616H69.2565V15.7616H63.9565V10.6616Z"/>
<path className={styles["sub-2"]} d="M76.1564 15.7616H70.8564V10.6616H76.1564V15.7616Z"/>
</g>
<path id={styles["chr4"]} className={"_4"} d="M77.6565 10.4616H103.956C100.056 27.5616 90.1565 34.0616 83.7565 36.5616V29.3616C89.3812 26.5233 93.6837 21.6113 95.7565 15.6616H77.6565V10.4616Z"/>
<path id={styles["chr5"]} className={"_5"} d="M110.546 21.4668L102.762 24.2656L102.753 18.4691L121.265 11.8482V17.6623L115.661 19.6672V34.1586H110.546V21.4668Z"/>
<path id={styles["chr6"]} className={"_6"} d="M120.056 26.0616V20.9616H140.256L135.856 26.0616H120.056Z"/>
<g id={styles["chr7"]} className={"_7"}>
<path d="M143.656 10.4616H148.856V25.9616C148.856 25.9616 149.056 34.6616 137.456 36.2616V30.2616C137.456 30.2616 143.556 30.1616 143.556 24.1616C143.556 18.1616 143.656 10.4616 143.656 10.4616Z"/>
<path d="M156.456 10.4616V29.9616C159.126 28.3887 161.468 26.3179 163.356 23.8616V29.8616C163.356 29.8616 160.656 35.1616 151.256 36.3616V34.0616V10.4616H156.456Z"/>
</g>
<g id={styles["chr8"]} className={"_8"}>
<path className={styles["main"]} d="M165.148 10.4728H170.248V18.6728L185.648 23.5728V28.6728L170.248 23.7729V36.4729H165.148V10.4728Z"/>
<path className={styles["sub-1"]} d="M173.448 10.6728H178.748V15.7728H173.448V10.6728Z"/>
<path className={styles["sub-2"]} d="M185.648 15.7728H180.348V10.6728H185.648V15.7728Z"/>
</g>
<g id={styles["chr9"]} className={joinClasses("_9")}>
<g clipPath={"url(#cn-square__hide)"}>
<rect id="cn-square" x="187.956" y="10.4616" width="26.6" height="26.6038"/>
<path className={styles["a"]} id="arknights-cn-char-1-1" d="M189.061 27.4385H189.477V26.3008H188.811V27.605H189.061V27.4385ZM189.061 26.5228H189.227V26.7448H189.061V26.5228ZM189.061 26.9668H189.227V27.1887H189.061V26.9668Z" data-inverse=""/>
<path className={styles["a"]} id="arknights-cn-char-1-2" d="M189.31 27.7992L189.532 27.9657C189.692 27.8079 189.799 27.6042 189.837 27.383H190.17V27.6605H189.893C189.933 27.7487 189.961 27.8421 189.976 27.938L190.337 27.8825C190.42 27.827 190.448 27.7715 190.448 27.6327V26.273H189.615V26.939C189.632 27.0961 189.614 27.255 189.561 27.4039C189.508 27.5528 189.422 27.6879 189.31 27.7992V27.7992ZM189.865 26.5228H190.17V26.6893H189.865V26.5228ZM189.865 26.939H190.17V27.1333H189.865V26.939Z" data-inverse=""/>
<path className={styles["a"]} id="arknights-cn-char-2" d="M190.892 27.7992H191.669V27.938H191.946V26.3008H190.614V27.938H190.892V27.7992ZM190.892 26.5783H191.669V26.9113H190.892V26.5783ZM190.892 27.1887H191.669V27.5495H190.892V27.1887Z" data-inverse=""/>
<path className={styles["a"]} id="arknights-cn-char-3" d="M192.085 27.7437C192.164 27.8041 192.23 27.8796 192.279 27.9657C192.421 27.8857 192.543 27.774 192.634 27.6392C192.726 27.5044 192.785 27.3502 192.807 27.1887H193.362C193.334 27.4662 193.306 27.6327 193.251 27.6605H192.834C192.895 27.7418 192.933 27.8374 192.945 27.938H193.251C193.344 27.9301 193.432 27.891 193.5 27.827C193.6 27.5804 193.647 27.3158 193.639 27.05V26.939H192.834C192.855 26.8764 192.865 26.8106 192.862 26.7448H193.806V26.4673H193.056L193.167 26.4118L193.029 26.162L192.779 26.273L192.862 26.4673H192.113V26.7448H192.557C192.582 26.9389 192.55 27.1361 192.467 27.3131C192.383 27.4901 192.251 27.6395 192.085 27.7437" data-inverse=""/>
<path className={styles["a"]} id="arknights-cn-char-4" d="M193.778 27.2442H194C193.994 27.3468 193.966 27.4469 193.918 27.5378C193.87 27.6288 193.804 27.7084 193.722 27.7715C193.813 27.8138 193.89 27.8812 193.944 27.9657C194.143 27.7761 194.262 27.5183 194.277 27.2442H194.971V27.6605H194.749C194.773 27.7451 194.8 27.8284 194.832 27.9102H195.138C195.221 27.8547 195.249 27.7992 195.249 27.6605V27.2442H195.471V26.9945H195.249V26.4118H194.694C194.741 26.3534 194.778 26.2878 194.805 26.2175H194.472C194.463 26.2937 194.444 26.3683 194.416 26.4395H194.028V26.9945H193.778V27.2442ZM194.971 26.6338V26.9945H194.694L194.832 26.8557L194.583 26.6338H194.971ZM194.305 26.9112V26.6338H194.555L194.388 26.7725L194.638 26.9945H194.305V26.9112ZM194.388 27.3275C194.502 27.3951 194.605 27.4793 194.694 27.5772L194.86 27.4107C194.768 27.3449 194.665 27.2978 194.555 27.272L194.388 27.3275Z" data-inverse=""/>
<path className={styles["e1"]} id="endfield-cn-chr1-main-t" d="M191.974 29.9082H191.419L188.7 34.2872V35.1516L192.002 34.0983V33.8768L194.472 32.3779L197.274 34.2926V32.7941L195.526 31.6286L197.052 30.5742V29.0479H194.166L194.721 28.3265H193.167L191.974 29.9082Z" data-inverse=""/>
<path className={styles["e1"]} id="endfield-cn-chr1-main-t-inner-l" d="M191.764 33.2779L190.674 33.2779L191.764 31.4742H192.013L192.69 30.804L193.734 31.7367L191.764 33.0244V33.2779Z"/>
<path className={styles["e1"]} id="endfield-cn-chr1-main-t-inner-r" d="M194.704 30.9241L193.91 30.3539H195.499L194.704 30.9241Z"/>
<path className={styles["e1"]} id="endfield-cn-chr1-main-b" d="M193.272 33.6597L192.241 34.3152L195.133 36.6017H197.188V34.9887L196.16 35.7027L193.272 33.6597Z" data-inverse=""/>
<path className={styles["e1"]} id="endfield-cn-chr1-stroke-tl-1" d="M191.934 28.3265H190.28L188.728 30.8168V31.9061H189.758L191.934 28.3265Z" data-inverse=""/>
<path className={styles["e1"]} id="endfield-cn-chr1-stroke-br-1" d="M194.527 32.7386L193.419 33.4821L196.026 35.347V33.7653L194.527 32.7386Z" data-inverse=""/>
<path className={styles["e1"]} id="endfield-cn-chr1-stroke-bl-1" d="M191.986 34.4896V35.6134L188.678 36.6672V35.5449L191.986 34.4896Z" data-inverse=""/>
<path className={styles["e2"]} id="endfield-cn-chr2" d="M197.047 29.0479H200.572V28.271H202.151V29.0479H205.677V30.3244H202.151V31.1291H204.871V32.4056H202.151V32.6553L205.62 35.0557V36.6651L202.151 34.1954V36.6462H200.572V34.226L197.187 36.6005V34.9887L200.572 32.6526V32.4028H197.853V31.1264H200.572V30.3216H197.047" data-inverse=""/>
<path className={styles["e2"]} id="patch-b" d="M197.33 34.8933L197.23 36.5627L197.187 36.594H197.145V35.0205L197.33 34.8933Z" data-inverse=""/>
<path className={styles["e2"]} id="patch-t" d="M196.963 29.0595H197.124V30.3201L196.963 30.3244V29.0595Z" data-inverse=""/>
<path className={styles["e3"]} id="endfield-cn-chr3-1" d="M208.429 30.2773H207.625V28.6595H206.182V30.2773H205.516V31.5603H206.182V33.9034L205.322 34.2102V36.0233L208.429 34.8796V33.0666L207.625 33.3734V31.5603H208.429V30.2773Z" data-inverse=""/>
<path className={styles["e3"]} id="endfield-cn-chr3-2" d="M207.93 31.5922V33.1132L208.651 32.8357V36.0269L209.9 36.6651H214.09V35.3609H210.122V32.2807L210.455 32.142V35.0557L211.898 34.4452V31.587L212.287 31.4483V34.3064L213.73 33.7237V29.3393L211.898 30.033V28.3403H210.455V30.588L210.122 30.7268V29.2561H208.651V31.2818L207.93 31.5922Z" data-inverse=""/>
</g>
</g>
</motion.svg>
);
};

11
components/logo/JP/JP.anim.scss Normal file
View File

@ -0,0 +1,11 @@
@keyframes char-stroke {
from {
stroke: #fff;
stroke-width: 0.1px;
fill: #000;
}
to {
stroke-width: 0;
fill: #fff;
}
}

221
components/logo/KR/KR-big.module.scss Normal file
View File

@ -0,0 +1,221 @@
@import "styles/anims";
$logo-anim-delay: 0s;
.logo {
width: clamp(700px, 100%, 2000px);
height: clamp(400px, 80%, 1400px);
path, #en-square {
fill: #fff;
}
path[data-inverse] {
fill: #000;
}
.no-fill {
fill: none;
stroke: #fff;
}
#arknights-kr {
$arknights-kr-anim-delay: calc(#{$logo-anim-delay} + 0s);
$delay: calc(
#{applyPlaybackSpeed(#{$arknights-kr-anim-delay})} +
#{applyPlaybackSpeed(0.05s)} * var(--order)
);
g {
opacity: 0;
transform: translateX(-10px);
animation:
opacity_spawn
applyPlaybackSpeed(0.5s)
#{$delay} steps(1) forwards,
slide_LR
applyPlaybackSpeed(0.8s)
#{$delay} $forceful forwards;
}
.char-1 .t-r,
.char-2 .t-l,
.char-2 .t-r,
.char-3 .t-r,
.char-4 .b {
transform: translateX(-0.78px);
animation:
reset-transform-x
applyPlaybackSpeed(1.1s)
#{$delay} $forceful forwards;
}
.char-2 .t-l { transform: translateX(-0.5px); }
}
#endfield-kr {
$endfield-kr-anim-delay: calc(#{$logo-anim-delay} + 0.5s);
& > * {
opacity: 0;
}
//#region row1
#movement-1 {
$movement-1-anim-delay: calc(#{$endfield-kr-anim-delay} + 0s);
transform: translateX(-10px);
animation:
opacity_spawn
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(#{$movement-1-anim-delay}) steps(1) forwards,
slide_LR
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(#{$movement-1-anim-delay})
$forceful forwards;
.group-1,
.char-2 {
transform: translateX(-6.26px);
animation:
reset-transform-x
applyPlaybackSpeed(1.2s)
applyPlaybackSpeed(#{$movement-1-anim-delay})
$slow-down forwards;
}
.group-1 {
transform: translateX(-2.26px);
}
.char-1.t-r {
transform-origin: 28.8px 28.78px;
transform: rotate(77.3deg);
fill: none;
stroke: #fff;
stroke-width: 0.2px;
@keyframes endfield-kr-m1-g1-shape {
80%, to {
fill: #fff;
stroke-width: 0;
}
}
animation:
endfield-kr-m1-g1-shape
applyPlaybackSpeed(1s)
applyPlaybackSpeed(calc(#{$movement-1-anim-delay} + 0.8s))
$slow-down forwards,
reset-rotate
applyPlaybackSpeed(0.6s)
applyPlaybackSpeed(calc(#{$movement-1-anim-delay} + 0.6s))
$forceful forwards;
}
}
$rest-delay-1: calc(#{$endfield-kr-anim-delay} + 0.6s);
.char-1.t-l,
.char-1.t-l-inner {
transform: translateY(-10px);
animation:
opacity_spawn
applyPlaybackSpeed(0.4s)
applyPlaybackSpeed(#{$rest-delay-1}) steps(1) forwards,
slide_UD
applyPlaybackSpeed(0.7s)
applyPlaybackSpeed(#{$rest-delay-1})
$forceful forwards;
}
.char-2.t {
transform: translateX(10px);
$delay: calc(#{$rest-delay-1} + 0.05s);
animation:
opacity_spawn
applyPlaybackSpeed(0.37s)
applyPlaybackSpeed(#{$delay}) steps(1) forwards,
slide_RL
applyPlaybackSpeed(0.67s)
applyPlaybackSpeed(#{$delay})
$forceful forwards;
}
//#endregion
//#region row2
$endfield-kr-chr3-delay: calc(#{$rest-delay-1} + 0.5s);
.char-3 {
transform: translateX(-10px);
animation:
opacity_spawn
applyPlaybackSpeed(0.3s)
applyPlaybackSpeed(#{$endfield-kr-chr3-delay}) steps(1) forwards,
slide_LR
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(#{$endfield-kr-chr3-delay})
$forceful forwards;
.t {
.r {
transform: translateX(-3.74px);
animation:
reset-transform-x
applyPlaybackSpeed(1.2s)
applyPlaybackSpeed(#{$endfield-kr-chr3-delay})
$slow-down forwards;
}
}
.b {
transform: translateY(-1.65px);
animation:
reset-transform-y
applyPlaybackSpeed(0.7s)
applyPlaybackSpeed(calc(#{$endfield-kr-chr3-delay} + 0.52s))
$forceful forwards;
}
}
$endfield-kr-chr4-delay: calc(#{$endfield-kr-chr3-delay} + 0.5s);
.char-4 {
opacity: 1;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
animation:
expand_UD
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(#{$endfield-kr-chr4-delay})
$forceful forwards;
$text-delay: calc(#{$endfield-kr-chr4-delay} + 0.05s * var(--order));
#en {
transform-origin: 47.8px 71px;
transform: scale(1.8);
.arknights,
.endfield {
opacity: 0;
transform: translateY(-10px);
animation:
opacity_spawn
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(#{$text-delay}) steps(1) forwards,
slide_UD
applyPlaybackSpeed(0.8s)
applyPlaybackSpeed(#{$text-delay})
$slow-down forwards;
}
}
.b {
--order: 0;
d: path("M62.5584,70.1636h-29.328v-29.54h29.328v29.54z");
@keyframes enfield-kr-chr4-b-path {
to { d: path("M62.5584,70.1636h-29.328v-5.571h29.328v5.571z"); }
}
animation:
enfield-kr-chr4-b-path
applyPlaybackSpeed(0.5s)
applyPlaybackSpeed(calc(#{$text-delay} + 0.8s))
$forceful forwards;
}
#en {
--order: 0;
animation:
reset-scale
applyPlaybackSpeed(0.55s)
applyPlaybackSpeed(calc(#{$text-delay} + 0.85s))
$slow-down forwards;
}
.t {
--order: 0;
transform: translateY(20px);
animation:
reset-transform-y
applyPlaybackSpeed(0.65s)
applyPlaybackSpeed(calc(#{$text-delay} + 0.8s))
$slow-down forwards;
}
}
//#endregion
}
}

116
components/logo/KR/KR-big.tsx Normal file
View File

@ -0,0 +1,116 @@
import { HasAnimation, joinClasses, joinModuleClasses, whichWider } from "@utils/common";
import {FC, useEffect, useRef, useState} from "react";
import { motion } from "framer-motion";
import { Forceful } from "@utils/anims";
import styles from "./KR-big.module.scss";
const moduleClasses = joinModuleClasses(styles);
export const LogoLarge_KR: FC<HasAnimation> = ({dontAnimateChild}) => {
const mode = useRef("fh");
const [isExiting, setIsExiting] = useState(false);
useEffect(() => {
mode.current = whichWider() === "width" ? "fw" : "fh";
}, []);
return (
<motion.svg
initial={{ opacity: 0 }}
animate={{
opacity: 1,
y: 0
}}
exit={{
opacity: 0,
y: dontAnimateChild ? 0 : 20,
}}
transition={{
duration: isExiting ? 0.5 : 0.3,
ease: Forceful
}}
data-logo={""}
data-noanim={dontAnimateChild}
className={joinClasses(styles.logo, mode.current, "abs")}
viewBox="-42 -30 152 148"
xmlns="http://www.w3.org/2000/svg"
>
<g id={styles["arknights-kr"]}>
<g className={joinClasses(styles["char-1"], "_0")}>
<mask id="logo-arknights-kr-chr1-t-l">
<path d="M1.79935 1.31039H5.16317V4.67421H1.79935V1.31039Z"/>
</mask>
<path className={styles["t-r"]} d="M7.68602 4.98958H7.16043V3.83327H5.47852V3.30767H7.16043V2.67695H5.47852V2.15136H7.16043V0.995041H7.68602V4.98958Z"/>
<path className={moduleClasses("t-l", "no-fill")} d="M1.79935 1.31039H5.16317V4.67421H1.79935V1.31039Z" strokeWidth="1" stroke="white" mask="url(#logo-arknights-kr-chr1-t-l)"/>
<path className={moduleClasses("b", "no-fill")} d="M7.42364 6.44946C7.42364 6.67121 7.24896 6.93598 6.82308 7.16124C6.40934 7.38007 5.8191 7.5236 5.15236 7.5236C4.48561 7.5236 3.89538 7.38007 3.48163 7.16124C3.05575 6.93598 2.88107 6.67121 2.88107 6.44946C2.88107 6.22771 3.05575 5.96294 3.48163 5.73768C3.89538 5.51884 4.48561 5.37532 5.15236 5.37532C5.8191 5.37532 6.40934 5.51884 6.82308 5.73768C7.24896 5.96294 7.42364 6.22771 7.42364 6.44946Z" stroke="white" strokeWidth="0.54"/>
</g>
<g className={joinClasses(styles["char-2"], "_1")}>
<path className={styles["b"]} d="M9.6833 7.72269V6.04078H13.783V5.72542H9.57819V5.19982H14.4137V6.67149H10.2089V7.09197H14.5188V7.72269H9.6833Z"/>
<path className={styles["t-r"]} d="M13.8881 0.995041H14.4137V4.88446H13.8881V0.995041Z"/>
<path className={moduleClasses("t-l", "no-fill")} d="M11.7591 2.9923C11.7591 3.76741 11.1094 4.40922 10.291 4.40922C9.47262 4.40922 8.82286 3.76741 8.82286 2.9923C8.82286 2.2172 9.47262 1.57539 10.291 1.57539C11.1094 1.57539 11.7591 2.2172 11.7591 2.9923Z" stroke="white" strokeWidth="0.53"/>
</g>
<g className={joinClasses(styles["char-3"], "_2")}>
<path className={styles["t-l"]} d="M17.7775 1.41553H18.3031V4.56911H15.3598V1.41553H15.8854V2.57184H17.7775V1.41553Z"/>
<path className={styles["t-l-inner"]} d="M15.8854 4.0435H17.7775V3.09742H15.8854V4.0435Z" data-inverse=""/>
<path className={styles["t-r"]} d="M21.3516 3.30767H20.1953V4.88446H19.6697V0.995041H20.1953V2.67695H21.3516V3.30767Z"/>
<path className={moduleClasses("b", "no-fill")} d="M20.0578 6.38505C20.0578 6.62232 19.896 6.88326 19.5358 7.09938C19.181 7.31227 18.6733 7.45269 18.0981 7.45269C17.5229 7.45269 17.0153 7.31227 16.6604 7.09938C16.3002 6.88326 16.1385 6.62232 16.1385 6.38505C16.1385 6.14779 16.3002 5.88684 16.6604 5.67072C17.0153 5.45784 17.5229 5.31741 18.0981 5.31741C18.6733 5.31741 19.181 5.45784 19.5358 5.67072C19.896 5.88684 20.0578 6.14779 20.0578 6.38505Z" stroke="white" strokeWidth="0.54"/>
</g>
<g className={joinClasses(styles["char-4"], "_3")}>
<path className={styles["b"]} d="M25.1359 7.72269H24.6103V5.19982H21.772V4.56911H27.9741V5.19982H25.1359V7.72269Z"/>
<path className={styles["t"]} d="M22.613 4.14863C22.5691 3.94329 22.4582 3.75838 22.2976 3.62303C22.8071 3.5606 23.2936 3.37476 23.7149 3.08166C24.1363 2.78856 24.4797 2.39705 24.7154 1.94112H22.4028V1.3104H27.4485V1.94112H25.3461L25.1359 2.15136C25.7351 2.92057 26.5951 3.44401 27.5536 3.62303L27.2383 4.14863C26.3538 3.92067 25.552 3.44687 24.9256 2.78207C24.311 3.46142 23.5045 3.93798 22.613 4.14863Z"/>
</g>
</g>
<g id={styles["endfield-kr"]}>
<g id={styles["movement-1"]}>
<path className={moduleClasses("char-1", "b")} d="M8.2116 33.0565H31.443L25.9768 38.7329H2.11467V35.5794L3.3761 29.3773H9.05256L8.2116 33.0565Z"/>
<path className={moduleClasses("char-2", "b")} d="M37.645 33.0565H61.7174V38.7329H32.1788L37.645 33.0565Z"/>
<g className={styles["group-1"]}>
<path className={moduleClasses("char-1", "t-r")} d="M29.3406 29.3773H23.6642L27.9741 9.19435H31.5481V18.7602L29.3406 29.3773Z"/>
</g>
</g>
<path className={moduleClasses("char-1", "t-l")} d="M14.8429 26.0375C13.4503 26.9973 11.795 27.5029 10.1038 27.4851C8.6091 27.4694 7.14718 27.0453 5.87607 26.2588C4.60497 25.4723 3.57305 24.3533 2.89188 23.0227C2.21072 21.6922 1.90623 20.2008 2.01134 18.7097C2.11645 17.2187 2.62716 15.7847 3.48825 14.5629C4.34934 13.3411 5.52804 12.3779 6.89691 11.7775C8.26578 11.1771 9.77274 10.9623 11.2549 11.1564C12.737 11.3504 14.1378 11.9459 15.306 12.8785C16.4741 13.8111 17.3651 15.0453 17.8826 16.4476H19.985L21.5618 9.19435H27.2383L22.9284 29.3773H17.2519L18.8287 22.124H17.8826C17.2973 23.7108 16.2355 25.0778 14.8429 26.0375Z"/>
<path className={moduleClasses("char-1", "t-l-inner")} d="M11.9846 17.0299C11.4833 16.6949 10.8939 16.5161 10.291 16.5161C9.48248 16.5161 8.7071 16.8373 8.1354 17.409C7.5637 17.9807 7.24252 18.7561 7.24252 19.5646C7.24252 20.1675 7.42131 20.7569 7.75628 21.2582C8.09125 21.7595 8.56736 22.1503 9.12439 22.381C9.68142 22.6117 10.2944 22.6721 10.8857 22.5545C11.4771 22.4369 12.0202 22.1465 12.4466 21.7202C12.8729 21.2938 13.1633 20.7507 13.2809 20.1593C13.3985 19.568 13.3381 18.955 13.1074 18.398C12.8767 17.841 12.4859 17.3649 11.9846 17.0299Z" data-inverse=""/>
<path className={moduleClasses("char-2", "t")} d="M38.9065 25.2776H60.5611L55.0949 30.9541H33.2301V9.19435H60.5611L55.0949 14.7657H38.9065V25.2776Z"/>
<g className={styles["char-3"]}>
<g className={styles["t"]}>
<path className={styles["l"]} fillRule="evenodd" clipRule="evenodd" d="M21.6669 46.3015L22.7181 40.6251H0.958374V46.3015H4.3222L3.58636 49.6653H0.958374V55.2367H20.6157L21.6669 49.6653H17.9877L18.6184 46.3015H21.6669ZM12.3113 49.6653H9.15769L9.89353 46.3015H13.0471L12.3113 49.6653Z"/>
<path className={styles["r"]} d="M28.9201 55.2367H23.3488L26.3973 40.6251H30.4969V47.9835L28.9201 55.2367Z"/>
</g>
<path className={styles["b"]} d="M12.6266 61.8592H0.958374V56.7083H30.4969V61.8592L18.9338 65.1179H30.4969V70.1636H0.958374V65.1179L12.6266 61.8592Z"/>
</g>
<mask id="logo-endfield-kr-chr4">
<path d="M62.5584,70.1636h-29.328v-29.54h29.328v29.54z"></path>
</mask>
<g className={styles["char-4"]} mask="url(#logo-endfield-kr-chr4)">
<path className={styles["t"]} d="M60.5611 40.6251L55.0949 46.3015H38.9065V56.8135H60.5611L55.0949 62.4899H33.2301V40.6251H60.5611Z"/>
<path className={styles["b"]} d="M62.5584,70.1636h-29.328v-5.571h29.328v5.571z"/>
<g id={styles["en"]}>
<g className={joinClasses(styles["arknights"], "_1")}>
<path id={styles["a"]} d="M41.3513 65.2693H41.8196L42.4517 67.03H42.0116L41.9015 66.7549H41.2963L41.1863 67.03H40.7461L41.3513 65.2693Z" data-inverse=""/>
<path id={styles["a-inner"]} d="M41.3623 66.4798L41.5824 65.8195L41.83 66.4798H41.3623Z"/>
<path id={styles["r"]} d="M42.6168 65.2693H43.2771C43.7172 65.2693 43.9923 65.4894 43.9923 65.8745C43.9906 65.98 43.9585 66.0828 43.9 66.1706C43.8415 66.2584 43.7589 66.3275 43.6622 66.3697L44.0473 67.03H43.6072L43.2771 66.4798H43.057V67.03H42.6168V65.2693Z" data-inverse=""/>
<path id={styles["r-inner"]} d="M43.5522 65.8745C43.5522 65.8162 43.529 65.7602 43.4877 65.7189C43.4464 65.6776 43.3904 65.6544 43.3321 65.6544H43.057V66.0946H43.3321C43.3904 66.0946 43.4464 66.0714 43.4877 66.0302C43.529 65.9889 43.5522 65.9329 43.5522 65.8745V65.8745Z"/>
<path id={styles["k"]} d="M44.6801 66.4247V67.03H44.2399V65.2693H44.6801V65.9295L45.3403 65.2693H45.8905L45.1202 65.9846L45.8905 67.03H45.3953L44.8451 66.3147L44.6801 66.4247Z" data-inverse=""/>
<path id={styles["n"]} d="M46.0281 65.2693H46.4132L47.1835 66.2757V65.2693L47.6237 65.2693V67.03H47.2385L46.4683 65.9846V67.03H46.0281V65.2693Z" data-inverse=""/>
<path id={styles["i"]} d="M47.8437 65.2693H48.2839V67.03H47.8437V65.2693Z" data-inverse=""/>
<path id={styles["g"]} d="M48.46 66.1496C48.4519 66.0247 48.4705 65.8995 48.5147 65.7823C48.5588 65.6652 48.6274 65.5588 48.716 65.4703C48.8045 65.3818 48.9109 65.3131 49.028 65.269C49.1452 65.2249 49.2704 65.2062 49.3953 65.2143C49.5583 65.2116 49.7184 65.2571 49.8554 65.3452C49.9925 65.4334 50.1004 65.5601 50.1656 65.7095L49.7254 65.8195C49.6886 65.7666 49.6391 65.7237 49.5814 65.6949C49.5238 65.666 49.4598 65.6521 49.3953 65.6544C49.264 65.6544 49.138 65.7066 49.0452 65.7995C48.9523 65.8923 48.9001 66.0183 48.9001 66.1496C48.9001 66.281 48.9523 66.4069 49.0452 66.4998C49.138 66.5926 49.264 66.6448 49.3953 66.6448C49.6704 66.6448 49.8355 66.5348 49.8355 66.3697H49.3953V66.0396H50.2206V67.03H49.8355V66.9199C49.7805 67.03 49.5604 67.085 49.3953 67.085C49.2704 67.0931 49.1452 67.0744 49.028 67.0303C48.9109 66.9861 48.8045 66.9175 48.716 66.829C48.6274 66.7405 48.5588 66.6341 48.5147 66.5169C48.4705 66.3998 48.4519 66.2746 48.46 66.1496" data-inverse=""/>
<path id={styles["h"]} d="M51.5301 65.9295V65.2693H51.9702V67.03H51.5301V66.3697H50.8698V67.03H50.4297V65.2693H50.8698V65.9295H51.5301Z" data-inverse=""/>
<path id={styles["t"]} d="M53.0156 67.03H52.6305V65.6544H52.0803V65.2693H53.5658V65.6544H53.0156V67.03Z" data-inverse=""/>
<path id={styles["s"]} d="M54.072 66.2597C53.962 66.2157 53.8485 66.1751 53.7691 66.0858C53.6896 65.9964 53.6415 65.8836 53.6319 65.7645C53.6388 65.6849 53.6614 65.6075 53.6984 65.5366C53.7353 65.4658 53.786 65.403 53.8474 65.3519C53.9087 65.3007 53.9797 65.2622 54.056 65.2386C54.1323 65.215 54.2126 65.2067 54.2921 65.2143C54.442 65.2096 54.5891 65.256 54.7091 65.346C54.8291 65.436 54.9149 65.5642 54.9524 65.7095L54.5672 65.8195C54.5607 65.783 54.5468 65.7483 54.5265 65.7173C54.5062 65.6863 54.4799 65.6597 54.449 65.6392C54.4182 65.6186 54.3835 65.6045 54.3471 65.5977C54.3107 65.5908 54.2698 65.5731 54.2336 65.5811C54.1236 65.5811 54.072 65.6545 54.072 65.7095C54.072 65.7645 54.2371 65.8745 54.4572 65.9846C54.6772 66.0946 55.0074 66.2047 55.0074 66.5348C55.0074 66.8649 54.7323 67.085 54.2921 67.085C54.1208 67.0921 53.952 67.0418 53.8125 66.9422C53.6729 66.8425 53.5707 66.6991 53.5218 66.5348L53.962 66.4247C54.017 66.5348 54.127 66.6998 54.2921 66.6998C54.4572 66.6998 54.5122 66.6448 54.5122 66.5348C54.5122 66.4247 54.3471 66.3697 54.072 66.2597Z" data-inverse=""/>
</g>
<g className={joinClasses(styles["endfield"], "_0")}>
<path id={styles["e-1"]} d="M42.3334 69.543H40.7516V67.4703H42.3334V67.9066H41.297V68.2885H42.0607V68.7248H41.297V69.1066H42.3334V69.543Z" data-inverse=""/>
<path id={styles["n"]} d="M44.5151 69.543H44.0242L43.1515 68.2867V69.543H42.6061V67.4703H43.097L44.0242 68.6703V67.4703H44.5151V69.543Z" data-inverse=""/>
<path id={styles["d-1"]} d="M47.7333 69.543H44.8424V67.4702H45.7697C45.9103 67.4628 46.051 67.4842 46.1831 67.5329C46.3152 67.5817 46.436 67.6568 46.538 67.7538C46.6401 67.8508 46.7214 67.9676 46.7768 68.097C46.8323 68.2264 46.8608 68.3658 46.8606 68.5066C46.8608 68.6474 46.8323 68.7868 46.7768 68.9162C46.7214 69.0456 46.6401 69.1624 46.538 69.2594C46.436 69.3564 46.3152 69.4315 46.1831 69.4803C46.051 69.529 45.9103 69.5504 45.7697 69.543" data-inverse=""/>
<path id={styles["d-1-inner"]} d="M45.7697 67.9066H45.3333V69.1066H45.7697C45.8461 69.107 45.9218 69.0913 45.9918 69.0605C46.0618 69.0298 46.1246 68.9847 46.176 68.9281C46.2274 68.8715 46.2664 68.8047 46.2904 68.7321C46.3143 68.6595 46.3228 68.5827 46.3151 68.5066C46.3157 68.3565 46.2601 68.2116 46.1591 68.1005C46.0581 67.9895 45.9192 67.9203 45.7697 67.9066"/>
<path id={styles["f"]} d="M48.4424 67.9066H47.5151V68.343H48.2787V68.7794H47.5151V69.543H47.0242V67.4703H48.4969L48.4424 67.9066Z" data-inverse=""/>
<path id={styles["i"]} d="M49.2333 69.543H48.7424V67.4703H49.2333V69.543Z" data-inverse=""/>
<path id={styles["e-2"]} d="M51.0606 69.543H49.5333V67.4703H51.0606V67.9066H50.0242V68.2885H50.8424V68.7248H50.0242V69.1066H51.0606V69.543Z" data-inverse=""/>
<path id={styles["l"]} d="M52.8606 69.543H51.3878V67.4703H51.8788V69.1066H52.8606V69.543Z" data-inverse=""/>
<path id={styles["d-2"]} d="M53.9515 69.543H53.0242V67.4702H53.9515C54.0921 67.4628 54.2327 67.4842 54.3648 67.5329C54.4969 67.5817 54.6177 67.6568 54.7198 67.7538C54.8219 67.8508 54.9031 67.9676 54.9586 68.097C55.0141 68.2264 55.0426 68.3658 55.0424 68.5066C55.0426 68.6474 55.0141 68.7868 54.9586 68.9162C54.9031 69.0456 54.8219 69.1624 54.7198 69.2594C54.6177 69.3564 54.4969 69.4315 54.3648 69.4803C54.2327 69.529 54.0921 69.5504 53.9515 69.543Z" data-inverse=""/>
<path id={styles["d-2-inner"]} d="M53.9514 67.9066H53.5151V69.1066H53.9514C54.0279 69.107 54.1036 69.0913 54.1736 69.0605C54.2436 69.0298 54.3063 68.9847 54.3578 68.9281C54.4092 68.8715 54.4482 68.8047 54.4721 68.7321C54.4961 68.6595 54.5045 68.5827 54.4969 68.5066C54.4975 68.3565 54.4418 68.2116 54.3408 68.1005C54.2399 67.9895 54.1009 67.9203 53.9514 67.9066"/>
</g>
</g>
</g>
</g>
</motion.svg>
);
};

162
components/logo/KR/KR-small.module.scss Normal file
View File

@ -0,0 +1,162 @@
@import "styles/anims";
$logo-anim-delay: 0s;
.logo {
max-width: 300px;
path, #en-square {
fill: #fff;
}
path[data-inverse] {
fill: #000;
}
.no-fill {
fill: none;
stroke: #fff;
}
*[char-outline] {
stroke: #fff;
stroke-width: 0;
}
&:not([data-noanim]) {
.arknights-kr {
$arknights-kr-anim-delay: calc(#{$logo-anim-delay} + 0s);
$delay: calc(
#{applyPlaybackSpeed(#{$arknights-kr-anim-delay})} +
#{applyPlaybackSpeed(0.05s)} * var(--order)
);
g {
opacity: 0;
transform: translateY(-10px);
animation:
opacity_spawn
applyPlaybackSpeed(0.5s)
#{$delay} steps(1) forwards,
slide_UD
applyPlaybackSpeed(0.8s)
#{$delay} $forceful forwards;
}
}
.endfield-kr {
$endfield-kr-anim-delay: calc(#{$logo-anim-delay} + 0.5s);
$chr1-delay: $endfield-kr-anim-delay;
.char-1 {
& > * {
opacity: 0;
}
.t-l,
.t-l-inner {
transform: translateY(-10px);
animation:
opacity_spawn
applyPlaybackSpeed(0.4s)
#{$chr1-delay} steps(1) forwards,
reset-transform-y
applyPlaybackSpeed(0.7s)
#{$chr1-delay} $forceful forwards;
}
.t-r {
transform: translateX(-3px);
animation:
opacity_spawn
applyPlaybackSpeed(0.4s)
#{$chr1-delay} steps(1) forwards,
reset-transform-x
applyPlaybackSpeed(0.7s)
#{$chr1-delay} $slow-down forwards;
}
}
$movement-1-anim-delay: calc(#{$chr1-delay} + 0.2s);
.movement-1 {
transform: translateX(-10px);
opacity: 0;
animation:
opacity_spawn
applyPlaybackSpeed(0.5s)
#{$movement-1-anim-delay} steps(1) forwards,
slide_LR
applyPlaybackSpeed(0.8s)
#{$movement-1-anim-delay} $forceful forwards;
.char-2 {
transform: translateX(-6.34px);
animation:
reset-transform-x
applyPlaybackSpeed(0.6s)
calc(#{$movement-1-anim-delay} + 0.6s) $slow-down forwards;
}
}
.char-2 .t {
transform: translateX(-6.34px);
opacity: 0;
animation:
opacity_spawn
applyPlaybackSpeed(0.3s)
calc(#{$movement-1-anim-delay} + 0.5s) steps(1) forwards,
reset-transform-x
applyPlaybackSpeed(0.6s)
calc(#{$movement-1-anim-delay} + 0.5s) $slow-down forwards;
}
$chr3-delay: calc(#{applyPlaybackSpeed($movement-1-anim-delay)} + 0.1s);
.char-3 {
opacity: 0;
transform: translateY(-10px);
animation:
opacity_spawn
applyPlaybackSpeed(0.5s)
#{$chr3-delay} steps(1) forwards,
slide_UD
applyPlaybackSpeed(0.8s)
#{$chr3-delay} $forceful forwards;
$sub-delay: calc(#{$chr3-delay} + 0.73s + 0.05s * var(--order));
.t-r {
transform: translateX(-3.5px);
animation:
reset-transform-x
applyPlaybackSpeed(0.5s)
#{$sub-delay} $slow-down forwards;
}
.b {
transform: translateY(-1.6px);
animation:
reset-transform-y
applyPlaybackSpeed(0.5s)
#{$sub-delay} $slow-down forwards;
}
}
$chr4-delay: calc(#{$chr3-delay} + 0.2s);
.char-4 {
opacity: 0;
animation:
opacity_spawn
applyPlaybackSpeed(0.5s)
#{$chr4-delay} steps(1) forwards;
.b, .t {
$delay: calc(#{$chr4-delay} + 0.4s + 0.15s * var(--order));
transform: translateX(-7px);
animation:
reset-transform-x
applyPlaybackSpeed(0.5s)
#{$delay} $slow-down forwards;
}
}
$chr5-delay: calc(#{$chr4-delay} + 0.7s);
.en {
#en-square {
transform: translateX(-33px);
animation:
reset-transform-x
applyPlaybackSpeed(0.7s)
calc(#{$chr5-delay}) $slow-down forwards;
}
g {
$delay: calc(#{$chr5-delay} + 0.1s * var(--order));
transform: translateX(-10px);
animation:
reset-transform-x
applyPlaybackSpeed(0.5s)
#{$delay} $slow-down forwards;
}
}
}
}
}

107
components/logo/KR/KR-small.tsx Normal file
View File

@ -0,0 +1,107 @@
import { HasAnimation, joinClasses, joinModuleClasses } from "@utils/common";
import { FC } from "react";
import { motion } from "framer-motion";
import { Forceful } from "@utils/anims";
import styles from "./KR-small.module.scss";
import { LogoSmallProps } from "@components/logo/logo.types";
const moduleClasses = joinModuleClasses(styles);
export const LogoSmall_KR: FC<HasAnimation & LogoSmallProps> = ({dontAnimateChild, opacity}) => {
return (
<motion.svg
fill="none"
initial={{ opacity: 1 }}
animate={{ opacity }}
exit={{ opacity: 0 }}
transition={{ duration: .5, ease: Forceful }}
data-logo={""}
viewBox="0 0 143 35"
xmlns="http://www.w3.org/2000/svg"
data-noanim={dontAnimateChild}
className={joinClasses(styles.logo, "fh")}
>
<g className={styles["arknights-kr"]}>
<g className={joinClasses(styles["char-1"], "_0")}>
<path className={styles["t-l"]} d="M0.867661 0.958469H3.66766V3.75847H0.867661V0.958469Z"/>
<path className={styles["t-l-inner"]} d="M1.36766 3.25847H3.26766V1.45847H1.36766V3.25847Z" data-inverse=""/>
<path className={styles["t-r"]} d="M5.76766 3.95847H5.26766V3.05847H3.96766V2.55847H5.26766V2.05847H3.96766V1.55847H5.26766V0.658466H5.76766V3.95847Z"/>
<path className={moduleClasses("b", "no-fill")} d="M5.5502 5.16322C5.5502 5.34121 5.40884 5.5587 5.05374 5.7456C4.70948 5.92677 4.21765 6.04592 3.6615 6.04592C3.10536 6.04592 2.61353 5.92677 2.26927 5.7456C1.91417 5.5587 1.77281 5.34121 1.77281 5.16322C1.77281 4.98524 1.91417 4.76774 2.26927 4.58085C2.61353 4.39967 3.10536 4.28053 3.6615 4.28053C4.21765 4.28053 4.70948 4.39967 5.05374 4.58085C5.40884 4.76774 5.5502 4.98524 5.5502 5.16322Z" strokeWidth="0.47"/>
</g>
<g className={joinClasses(styles["char-2"], "_1")}>
<path className={styles["t-r"]} d="M10.9677 0.658466H11.4677V3.95847H10.9677V0.658466Z"/>
<path className={moduleClasses("t-l", "no-fill")} d="M9.22209 2.36696C9.22209 2.99715 8.69128 3.52152 8.01956 3.52152C7.34785 3.52152 6.81704 2.99715 6.81704 2.36696C6.81704 1.73676 7.34785 1.21239 8.01956 1.21239C8.69128 1.21239 9.22209 1.73676 9.22209 2.36696Z" strokeWidth="0.47"/>
<path className={styles["b"]} d="M7.36766 6.25847V4.85847H10.8677V4.65847H7.36766V4.15847H11.3677V5.35847H7.86766V5.75847H11.4677V6.25847H7.36766Z"/>
</g>
<g className={joinClasses(styles["char-3"], "_2")}>
<path className={styles["t-r"]} d="M17.2677 2.55847H16.2677V3.95847H15.7677V0.658466H16.2677V2.05847H17.2677V2.55847Z"/>
<path className={styles["t-l"]} d="M14.2677 1.05847H14.7677V3.65847H12.1677V1.05847H12.6677V1.95847H14.2677V1.05847Z"/>
<path className={styles["t-l-inner"]} d="M12.6677 3.15847H14.2677V2.45847H12.6677V3.15847Z" data-inverse=""/>
<path className={moduleClasses("b", "no-fill")} d="M16.1511 5.18104C16.1511 5.37163 16.0205 5.5848 15.7223 5.76299C15.4289 5.9383 15.0084 6.05434 14.5313 6.05434C14.0542 6.05434 13.6337 5.9383 13.3403 5.76299C13.0421 5.5848 12.9115 5.37163 12.9115 5.18104C12.9115 4.99044 13.0421 4.77727 13.3403 4.59908C13.6337 4.42377 14.0542 4.30773 14.5313 4.30773C15.0084 4.30773 15.4289 4.42377 15.7223 4.59908C16.0205 4.77727 16.1511 4.99044 16.1511 5.18104Z" strokeWidth="0.47"/>
</g>
<g className={joinClasses(styles["char-4"], "_3")}>
<path className={styles["b"]} fillRule="evenodd" clipRule="evenodd" d="M19.9677 6.25847H20.4677V4.15847H22.8677V3.65847H17.5677V4.15847H19.9677V6.25847Z"/>
<path className={styles["t"]} d="M18.3677 3.35847L18.0677 2.85847C19.1677 2.55847 19.8677 2.05847 20.0677 1.35847H18.1677V0.958469H22.2677V1.35847H20.4677V1.65847C20.966 2.28858 21.6771 2.71525 22.4677 2.85847C22.3245 2.99511 22.2209 3.16785 22.1677 3.35847C21.4196 3.17819 20.7519 2.75644 20.2677 2.15847C19.7294 2.69217 19.0809 3.10174 18.3677 3.35847Z"/>
</g>
</g>
<g className={styles["endfield-kr"]}>
<g className={styles["char-1"]}>
<path className={styles["t-l"]} d="M12.5898 23.0548C11.3231 23.9469 9.81676 24.4361 8.26766 24.4585C6.25202 24.4585 4.31893 23.6578 2.89365 22.2325C1.46838 20.8072 0.667664 18.8741 0.667664 16.8585C0.667664 14.8428 1.46838 12.9097 2.89365 11.4845C4.31893 10.0592 6.25202 9.25847 8.26766 9.25847C9.81676 9.28088 11.3231 9.77007 12.5898 10.6621C13.8564 11.5541 14.8246 12.8075 15.3677 14.2585H17.3677L18.7677 7.55847H23.9677L19.9677 26.1585H14.7677L16.2677 19.4585H15.3677C14.8246 20.9094 13.8564 22.1628 12.5898 23.0548Z"/>
<path className={styles["t-l-inner"]} d="M10.2476 14.8786C9.72246 14.3535 9.01027 14.0585 8.26767 14.0585C7.52506 14.0585 6.81287 14.3535 6.28777 14.8786C5.76267 15.4037 5.46767 16.1159 5.46767 16.8585C5.46767 17.6011 5.76267 18.3133 6.28777 18.8384C6.81287 19.3635 7.52506 19.6585 8.26767 19.6585C9.01027 19.6585 9.72246 19.3635 10.2476 18.8384C10.7727 18.3133 11.0677 17.6011 11.0677 16.8585C11.0677 16.1159 10.7727 15.4037 10.2476 14.8786Z" data-inverse=""/>
<path className={styles["t-r"]} d="M25.8677 26.1585H20.6677L24.6677 7.55847H27.9677V16.3585L25.8677 26.1585Z"/>
</g>
<g className={styles["movement-1"]}>
<path className={moduleClasses("char-1", "b")} d="M1.96766 26.1585H7.16766L6.46766 29.4585H27.8677L23.2677 34.6585H0.767662V31.7585L1.96766 26.1585Z"/>
<path className={moduleClasses("char-2", "b")} d="M56.6677 34.6585H29.4677L34.0677 29.4585H56.6677V34.6585Z"/>
</g>
<g className={styles["char-2"]}>
<path className={styles["t"]} d="M35.6677 22.0585H55.5677L50.9677 27.2585H30.4677V7.55847H55.5677L50.9677 12.7585H35.6677V22.0585Z"/>
</g>
<g className={styles["char-3"]}>
<path className={styles["t-l"]} d="M73.7677 15.7585H77.1677L76.2677 20.9585H58.1677V15.7585H60.5677L61.1677 12.7585H58.1677V7.55847H78.1677L77.1677 12.7585H74.4677L73.7677 15.7585Z"/>
<path className={styles["t-l-inner"]} d="M65.7677 15.7585H68.6677L69.2677 12.7585H66.3677L65.7677 15.7585Z" data-inverse=""/>
<path className={joinClasses(styles["t-r"], "_0")} d="M83.9677 20.9585H78.7677L81.5677 7.55847H85.3677V14.2585L83.9677 20.9585Z"/>
<path className={joinClasses(styles["b"], "_1")} d="M68.8677 26.9585H58.1677V22.3585H85.3677V26.9585L74.6677 29.9585H85.3677V34.6585H58.1677V29.9585L68.8677 26.9585Z"/>
</g>
<g className={styles["char-4"]}>
<path className={joinClasses(styles["b"], "_0")} d="M114.068 34.6585H86.8677V29.4585H114.068V34.6585Z"/>
<path className={joinClasses(styles["t"], "_1")} d="M93.0677 22.0585H111.968L107.368 27.2585H87.8677V7.55847H111.968L107.368 12.7585H93.0677V22.0585Z"/>
</g>
<mask id="endfield-kr-small-logo-en-mask">
<path d="M142.968 7.55846H115.868V34.6585H142.968V7.55846Z"/>
</mask>
<g className={styles["en"]} mask="url(#endfield-kr-small-logo-en-mask)">
<mask id="endfield-kr-logo-en-square">
<use xlinkHref={"#" + styles["en-square"]}/>
</mask>
<path id={styles["en-square"]} d="M142.968 7.55846H115.868V34.6585H142.968V7.55846Z"/>
<g className={joinClasses(styles["arknights"], "_1")} mask="url(#endfield-kr-logo-en-square)">
<path className={styles["a"]} d="M118.748 26.1637H119.521L120.565 29.0699H119.838L119.657 28.6158H118.658L118.476 29.0699H117.749L118.748 26.1637Z" data-inverse=""/>
<path className={styles["a-inner"]} d="M118.767 28.1617L119.13 27.0719L119.539 28.1617H118.767Z"/>
<path className={styles["r"]} d="M120.837 26.1637H121.927C122.654 26.1637 123.108 26.527 123.108 27.1627C123.105 27.3369 123.052 27.5065 122.955 27.6514C122.859 27.7964 122.722 27.9104 122.563 27.9801L123.198 29.0699H122.472L121.927 28.1617H121.564V29.0699H120.837V26.1637Z" data-inverse=""/>
<path className={styles["r-inner"]} d="M122.381 27.1627C122.381 27.0664 122.343 26.974 122.275 26.9058C122.207 26.8377 122.114 26.7994 122.018 26.7994H121.564V27.526H122.018C122.114 27.526 122.207 27.4877 122.275 27.4196C122.343 27.3514 122.381 27.259 122.381 27.1627Z"/>
<path className={styles["k"]} d="M124.243 28.0709V29.0699H123.516V26.1637H124.243V27.2535L125.333 26.1637H126.241L124.969 27.3444L126.241 29.0699H125.424L124.515 27.8893L124.243 28.0709Z" data-inverse=""/>
<path className={styles["n"]} d="M126.468 26.1637H127.104L128.375 27.8248V26.1637L129.102 26.1637V29.0699H128.466L127.194 27.3444V29.0699H126.468V26.1637Z" data-inverse=""/>
<path className={styles["i"]} d="M129.465 26.1637H130.191V29.0699H129.465V26.1637Z" data-inverse=""/>
<path className={styles["g"]} d="M130.482 27.6168C130.469 27.4106 130.499 27.2039 130.572 27.0105C130.645 26.8172 130.759 26.6416 130.905 26.4955C131.051 26.3493 131.226 26.2361 131.42 26.1632C131.613 26.0903 131.82 26.0595 132.026 26.0729C132.295 26.0684 132.559 26.1436 132.785 26.2891C133.012 26.4345 133.19 26.6437 133.297 26.8902L132.571 27.0719C132.51 26.9845 132.428 26.9137 132.333 26.8661C132.238 26.8185 132.132 26.7956 132.026 26.7994C131.809 26.7994 131.601 26.8855 131.448 27.0388C131.295 27.1921 131.209 27.4 131.209 27.6168C131.209 27.8336 131.295 28.0415 131.448 28.1948C131.601 28.348 131.809 28.4342 132.026 28.4342C132.48 28.4342 132.753 28.2525 132.753 27.9801H132.026V27.4352H133.388V29.0699H132.753V28.8882C132.662 29.0699 132.298 29.1607 132.026 29.1607C131.82 29.174 131.613 29.1433 131.42 29.0704C131.226 28.9975 131.051 28.8842 130.905 28.7381C130.759 28.592 130.645 28.4164 130.572 28.223C130.499 28.0297 130.469 27.823 130.482 27.6168Z" data-inverse=""/>
<path className={styles["h"]} d="M135.55 27.2535V26.1637H136.276V29.0699H135.55V27.9801H134.46V29.0699H133.733V26.1637H134.46V27.2535H135.55Z" data-inverse=""/>
<path className={styles["t"]} d="M138.002 29.0699H137.366V26.7994H136.458V26.1637H138.91V26.7994H138.002V29.0699Z" data-inverse=""/>
<path className={styles["s"]} d="M139.745 27.7984C139.564 27.7258 139.376 27.6588 139.245 27.5114C139.114 27.3639 139.035 27.1777 139.019 26.9811C139.03 26.8497 139.068 26.7218 139.129 26.6049C139.19 26.488 139.273 26.3844 139.375 26.3C139.476 26.2155 139.593 26.152 139.719 26.113C139.845 26.0741 139.977 26.0604 140.109 26.0729C140.356 26.0651 140.599 26.1417 140.797 26.2903C140.995 26.4389 141.137 26.6505 141.199 26.8903L140.563 27.0719C140.552 27.0117 140.529 26.9543 140.496 26.9031C140.462 26.852 140.419 26.8081 140.368 26.7742C140.317 26.7403 140.26 26.717 140.2 26.7057C140.139 26.6944 140.072 26.6652 140.012 26.6783C139.831 26.6783 139.745 26.7994 139.745 26.8903C139.745 26.9811 140.018 27.1627 140.381 27.3443C140.744 27.526 141.289 27.7076 141.289 28.2525C141.289 28.7974 140.835 29.1607 140.109 29.1607C139.826 29.1724 139.547 29.0895 139.317 28.925C139.087 28.7605 138.918 28.5238 138.837 28.2525L139.564 28.0709C139.655 28.2525 139.836 28.525 140.109 28.525C140.381 28.525 140.472 28.4342 140.472 28.2525C140.472 28.0709 140.2 27.9801 139.745 27.7984Z" data-inverse=""/>
</g>
<g className={joinClasses(styles["endfield"], "_0")} mask="url(#endfield-kr-logo-en-square)">
<path className={styles["e-1"]} d="M120.369 33.2179H117.758V29.7967H120.369V30.5169H118.659V31.1472H119.919V31.8674H118.659V32.4977H120.369V33.2179Z" data-inverse=""/>
<path className={styles["n"]} d="M123.971 33.2179H123.16L121.72 31.1442V33.2179H120.82V29.7967H121.63L123.16 31.7774V29.7967H123.971V33.2179Z" data-inverse=""/>
<path className={styles["d-1"]} d="M129.283 33.2179H124.511V29.7966H126.041C126.274 29.7844 126.506 29.8196 126.724 29.9001C126.942 29.9806 127.141 30.1046 127.31 30.2647C127.478 30.4248 127.612 30.6175 127.704 30.8312C127.795 31.0448 127.842 31.2748 127.842 31.5073C127.842 31.7397 127.795 31.9698 127.704 32.1834C127.612 32.397 127.478 32.5898 127.31 32.7499C127.141 32.9099 126.942 33.034 126.724 33.1145C126.506 33.1949 126.274 33.2301 126.041 33.2179" data-inverse=""/>
<path className={styles["d-1-inner"]} d="M126.041 30.5169H125.321V32.4977H126.041C126.168 32.4983 126.293 32.4724 126.408 32.4216C126.524 32.3708 126.627 32.2963 126.712 32.203C126.797 32.1096 126.861 31.9994 126.901 31.8795C126.94 31.7597 126.954 31.6329 126.942 31.5073C126.943 31.2595 126.851 31.0203 126.684 30.837C126.518 30.6536 126.288 30.5394 126.041 30.5169Z"/>
<path className={styles["f"]} d="M130.453 30.5169H128.922V31.2372H130.183V31.9575H128.922V33.2179H128.112V29.7967H130.543L130.453 30.5169Z" data-inverse=""/>
<path className={styles["i"]} d="M131.759 33.2179H130.948V29.7967H131.759V33.2179Z" data-inverse=""/>
<path className={styles["e-2"]} d="M134.775 33.2179H132.254V29.7967H134.775V30.5169H133.064V31.1472H134.415V31.8674H133.064V32.4977H134.775V33.2179Z" data-inverse=""/>
<path className={styles["l"]} d="M137.746 33.2179H135.315V29.7967H136.125V32.4977H137.746V33.2179Z" data-inverse=""/>
<path className={styles["d-2"]} d="M139.546 33.2179H138.016V29.7966H139.546C139.779 29.7844 140.011 29.8196 140.229 29.9001C140.447 29.9806 140.646 30.1046 140.815 30.2647C140.983 30.4248 141.117 30.6175 141.209 30.8312C141.3 31.0448 141.347 31.2748 141.347 31.5073C141.347 31.7397 141.3 31.9698 141.209 32.1834C141.117 32.397 140.983 32.5898 140.815 32.7499C140.646 32.9099 140.447 33.034 140.229 33.1145C140.011 33.1949 139.779 33.2301 139.546 33.2179Z" data-inverse=""/>
<path className={styles["d-2-inner"]} d="M139.546 30.5169H138.826V32.4977H139.546C139.673 32.4983 139.798 32.4724 139.913 32.4216C140.029 32.3708 140.132 32.2963 140.217 32.203C140.302 32.1096 140.366 31.9994 140.406 31.8795C140.445 31.7597 140.459 31.6329 140.447 31.5073C140.448 31.2595 140.356 31.0203 140.189 30.837C140.023 30.6536 139.793 30.5394 139.546 30.5169Z"/>
</g>
</g>
</g>
</motion.svg>
);
};

57
components/logo/MountainContour/MountainContour.module.scss Normal file
View File

@ -0,0 +1,57 @@
@import "styles/anims";
.wing {
transform-origin: 26.2px 31.5px;
}
.MCLogo {
aspect-ratio: 124 / 47;
path {
fill: #fff;
&[data-inverse] {
fill: #000;
}
}
&:not([data-noanim])
{
transform: translateX(-25%);
animation: reset-transform 0.8s 0.5s $forceful forwards;
--icon-anim-delay: 1.52s;
#dragonfly {
transform: translate(28px, 20px);
animation: reset-transform 0.8s var(--icon-anim-delay) $slow-down forwards;
.wing {
animation: reset-rotate 0.8s calc(var(--icon-anim-delay) + 0.3s) $slow-down forwards;
}
#l-wing-main { transform: rotate(-15deg) }
#l-wing-sub { transform: rotate(-8deg) }
#r-wing-main { transform: rotate(15deg) }
#r-wing-sub { transform: rotate(8deg) }
}
#particles path {
transform: translateX(5px);
opacity: 0;
animation:
reset-transform 0.8s calc(var(--icon-anim-delay) + 0.1s) $slow-down forwards,
opacity_spawn 0s calc(var(--icon-anim-delay) + 0.55s + var(--order) * 0.08s) steps(1) forwards;
}
--text-anim-delay: 1.47s;
#txt-mt {
transform: translateX(6px);
opacity: 0;
animation:
opacity_spawn 0s calc(var(--text-anim-delay) + 0.4s) steps(1) forwards,
slide_RL 0.7s var(--text-anim-delay) $forceful forwards;
}
#txt-ct {
transform: translateX(6px);
opacity: 0;
animation:
opacity_spawn 0s calc(var(--text-anim-delay) + 0.05s + 0.4s) steps(1) forwards,
slide_RL 0.7s calc(var(--text-anim-delay) + 0.1s) $forceful forwards;
}
}
}

66
components/logo/MountainContour/MountainContour.tsx Normal file
View File

@ -0,0 +1,66 @@
import styles from './MountainContour.module.scss';
import { FC } from "react";
import {HasAnimation, Logo, OverridableStyle} from "@utils/common";
import {motion, MotionProps} from "framer-motion";
export const MountainContourLogo: FC<HasAnimation & OverridableStyle & Logo & MotionProps> = ({ overrideStyles, dontAnimateChild = null, noLogoText, ...animProps }) => {
return (
<motion.svg
className={styles.MCLogo}
data-noanim={dontAnimateChild ? dontAnimateChild : null}
style={overrideStyles}
viewBox={noLogoText ? "0 0 53 47" : "0 0 124 47"}
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...animProps}
>
<defs>
<clipPath id="mc__triangle">
<path d="M0,46.247l52.4,0l-26.2,-45.4l-26.2,45.4z" fill="black"/>
</clipPath>
</defs>
<g id={styles["icon"]} clipPath="url(#mc__triangle)">
<path id={styles["triangle"]} d="M0 46.247H52.4L26.2 0.847L0 46.247ZM3.9 43.947L26.2 5.347L48.5 43.947H3.9V43.947Z"/>
<g id={styles["dragonfly"]}>
<g className={styles["wing"]} id={styles["l-wing-main"]}>
<path className={styles["wing"]} id={styles["l-wing-main-l1"]} d="M10.4 39.147L11.7 40.847L13.4 40.447L15.4 36.247L10.4 39.147Z"/>
<path className={styles["wing"]} id={styles["l-wing-main-l2"]} d="M18.2 35.547L24.5 31.347L24.3 31.047C24.3 31.147 19.6 33.847 15.7 36.147L13.6 40.347L16.9 39.547L18.1 35.547H18.2V35.547Z"/>
<path className={styles["wing"]} id={styles["l-wing-main-l3"]} d="M20.1 35.947L24.7 31.747V31.447L18.3 35.647L17.1 39.447L19.3 38.847L20.1 35.947V35.947Z"/>
<path className={styles["wing"]} id={styles["l-wing-main-l4"]} d="M23.6 35.347L24.2 34.547L25.4 33.047L24.8 31.847L20.2 36.047L19.5 38.847L21.1 38.447L23.6 35.347Z"/>
</g>
<path className={styles["wing"]} id={styles["l-wing-sub"]} d="M27.1 33.447L26.3 32.747L20.6 42.347L21.4 42.547L26 38.047L26.9 34.547L27.5 34.147L26.9 34.547L27.1 33.447V33.447Z"/>
<path id={styles["crosshair"]} d="M25.842 32.104L26.2 32.1V31.2H27.1V30.9H26.2V30L25.842 30.004L25.839 30.9H25V31.2L25.838 31.208L25.842 32.104Z"/>
<path className={styles["wing"]} id={styles["r-wing-main"]} d="M25.2 29.647H27.4L29.5 24.247V21.747L27.3 13.747L25.2 13.547V29.647ZM29.499 24.247L29.802 23.245L29.8 22.739L29.706 22.455L29.502 21.745L29.499 24.247Z"/>
<path className={styles["wing"]} id={styles["r-wing-sub"]} d="M31.3 23.747L27.6 30.447L28.6 30.847L29.1 30.447L29.8 29.747L30.2 29.447L32.1 27.547L33.6 21.347L33.1 20.747L31.5 23.547L31.3 23.747Z"/>
<path id={styles["eye-l"]} d="M22.7 29.547V31.347L24.3 30.447L22.7 29.547V29.547Z"/>
<path id={styles["eye-r"]} d="M24.6 28.147L23.1 29.047L24.6 29.847V28.147Z"/>
<path id={styles["tail"]} d="M27.6 31.247L27 32.347L29.3 34.647L41 40.047L41.2 39.747L30.8 32.347L27.6 31.247V31.247Z"/>
</g>
<g id={styles["particles"]}>
<path className="_1" d="M30.2 21.247L29.5 21.647L30.2 22.047V21.247V21.247Z"/>
<path className="_4" d="M24.2184 34.8777L23.5067 34.4192L24.2184 33.9917" data-inverse=""/>
<path className="_1" d="M24.2 35.744L23.51 35.289L24.2 34.858"/>
<path className="_1" d="M27.501 34.948L26.9 34.547L27.501 34.148"/>
<path className="_3" d="M27.299 29.247L26.601 28.847L27.3 28.448" data-inverse=""/>
<path className="_5" d="M27.296 30.014L26.599 29.649L27.299 29.246" data-inverse=""/>
<path className="_2" d="M29.3 29.046L28.459 28.569L29.301 28.145" data-inverse=""/>
<path className="_4" d="M30.9 24.047L31.54 23.567L30.9 23.239"/>
<path className="_5" d="M29.8 30.847L29.099 30.446L29.8 30.048"/>
<path className="_3" d="M29.799 30.049L29.808 29.186L30.501 29.647"/>
<path className="_5" d="M30.203 22.945L29.504 22.582L30.203 22.147"/>
<path className="_2" d="M28.8 24.647L27.995 24.247L28.8 23.847" data-inverse=""/>
<path className="_2" d="M29.498 24.247L28.799 23.847L29.499 23.448" data-inverse=""/>
<path className="_4" d="M29.502 23.447L28.799 22.949L29.501 22.547" data-inverse=""/>
<path className="_5" d="M29.501 22.548L28.8 22.148L29.502 21.746" data-inverse=""/>
<path className="_3" d="M28.8 22.15L28 21.747L28.804 21.345" data-inverse=""/>
</g>
</g>
{!noLogoText && <>
<path id={styles["txt-mt"]} d="M51.2765 22L51.5565 5.8H54.6165L56.9165 17.02L59.3165 5.8H62.2765L62.5765 22H60.3765L60.1365 10.74L57.8365 22H56.0565L53.7165 10.7L53.4965 22H51.2765ZM68.1688 22.22C67.0222 22.22 66.1088 22.0067 65.4288 21.58C64.7488 21.1533 64.2622 20.54 63.9688 19.74C63.6755 18.94 63.5288 17.9933 63.5288 16.9V10.84C63.5288 9.74667 63.6755 8.81333 63.9688 8.04C64.2622 7.25333 64.7488 6.65333 65.4288 6.24C66.1088 5.82667 67.0222 5.62 68.1688 5.62C69.3422 5.62 70.2622 5.82667 70.9288 6.24C71.6088 6.65333 72.0955 7.25333 72.3888 8.04C72.6955 8.81333 72.8488 9.74667 72.8488 10.84V16.92C72.8488 18 72.6955 18.94 72.3888 19.74C72.0955 20.5267 71.6088 21.14 70.9288 21.58C70.2622 22.0067 69.3422 22.22 68.1688 22.22ZM68.1688 20.04C68.6622 20.04 69.0222 19.9333 69.2488 19.72C69.4888 19.5067 69.6488 19.2133 69.7288 18.84C69.8088 18.4667 69.8488 18.06 69.8488 17.62V10.16C69.8488 9.70667 69.8088 9.3 69.7288 8.94C69.6488 8.58 69.4888 8.3 69.2488 8.1C69.0222 7.88667 68.6622 7.78 68.1688 7.78C67.7022 7.78 67.3488 7.88667 67.1088 8.1C66.8688 8.3 66.7088 8.58 66.6288 8.94C66.5488 9.3 66.5088 9.70667 66.5088 10.16V17.62C66.5088 18.06 66.5422 18.4667 66.6088 18.84C66.6888 19.2133 66.8488 19.5067 67.0888 19.72C67.3288 19.9333 67.6888 20.04 68.1688 20.04ZM78.2784 22.22C77.0784 22.22 76.145 22 75.4784 21.56C74.8117 21.12 74.3517 20.4933 74.0984 19.68C73.845 18.8667 73.7184 17.8933 73.7184 16.76V5.8H76.5984V17.1C76.5984 17.6067 76.6317 18.0867 76.6984 18.54C76.765 18.98 76.9184 19.34 77.1584 19.62C77.4117 19.8867 77.785 20.02 78.2784 20.02C78.7984 20.02 79.1717 19.8867 79.3984 19.62C79.6384 19.34 79.7917 18.98 79.8584 18.54C79.9384 18.0867 79.9784 17.6067 79.9784 17.1V5.8H82.8384V16.76C82.8384 17.8933 82.7117 18.8667 82.4584 19.68C82.205 20.4933 81.745 21.12 81.0784 21.56C80.425 22 79.4917 22.22 78.2784 22.22ZM83.9665 22V5.8H86.0265L89.9665 15.04V5.8H92.4065V22H90.4465L86.4865 12.32V22H83.9665ZM95.2849 22V7.98H92.7049V5.8H100.785V7.98H98.2449V22H95.2849ZM99.848 22L103.088 5.8H106.248L109.488 22H106.748L106.108 18.26H103.288L102.628 22H99.848ZM103.588 16.38H105.788L104.688 9.58L103.588 16.38ZM109.997 22V5.8H112.917V22H109.997ZM114.225 22V5.8H116.285L120.225 15.04V5.8H122.665V22H120.705L116.745 12.32V22H114.225Z"/>
<path id={styles["txt-ct"]} d="M59.0335 40.22C57.8468 40.22 56.9135 39.9867 56.2335 39.52C55.5668 39.0533 55.1002 38.42 54.8335 37.62C54.5668 36.8067 54.4335 35.8733 54.4335 34.82V29.04C54.4335 27.9333 54.5668 26.9733 54.8335 26.16C55.1002 25.3467 55.5668 24.72 56.2335 24.28C56.9135 23.84 57.8468 23.62 59.0335 23.62C60.1535 23.62 61.0268 23.8133 61.6535 24.2C62.2935 24.5733 62.7468 25.1133 63.0135 25.82C63.2802 26.5267 63.4135 27.3467 63.4135 28.28V29.64H60.5735V28.24C60.5735 27.7867 60.5468 27.3733 60.4935 27C60.4535 26.6267 60.3268 26.3333 60.1135 26.12C59.9135 25.8933 59.5602 25.78 59.0535 25.78C58.5468 25.78 58.1735 25.9 57.9335 26.14C57.7068 26.3667 57.5602 26.68 57.4935 27.08C57.4268 27.4667 57.3935 27.9067 57.3935 28.4V35.44C57.3935 36.0267 57.4402 36.5133 57.5335 36.9C57.6268 37.2733 57.7935 37.56 58.0335 37.76C58.2868 37.9467 58.6268 38.04 59.0535 38.04C59.5468 38.04 59.8935 37.9267 60.0935 37.7C60.3068 37.46 60.4402 37.1467 60.4935 36.76C60.5468 36.3733 60.5735 35.94 60.5735 35.46V34H63.4135V35.3C63.4135 36.26 63.2868 37.1133 63.0335 37.86C62.7802 38.5933 62.3335 39.1733 61.6935 39.6C61.0668 40.0133 60.1802 40.22 59.0335 40.22ZM68.6743 40.22C67.5276 40.22 66.6143 40.0067 65.9343 39.58C65.2543 39.1533 64.7676 38.54 64.4743 37.74C64.181 36.94 64.0343 35.9933 64.0343 34.9V28.84C64.0343 27.7467 64.181 26.8133 64.4743 26.04C64.7676 25.2533 65.2543 24.6533 65.9343 24.24C66.6143 23.8267 67.5276 23.62 68.6743 23.62C69.8476 23.62 70.7676 23.8267 71.4343 24.24C72.1143 24.6533 72.601 25.2533 72.8943 26.04C73.201 26.8133 73.3543 27.7467 73.3543 28.84V34.92C73.3543 36 73.201 36.94 72.8943 37.74C72.601 38.5267 72.1143 39.14 71.4343 39.58C70.7676 40.0067 69.8476 40.22 68.6743 40.22ZM68.6743 38.04C69.1676 38.04 69.5276 37.9333 69.7543 37.72C69.9943 37.5067 70.1543 37.2133 70.2343 36.84C70.3143 36.4667 70.3543 36.06 70.3543 35.62V28.16C70.3543 27.7067 70.3143 27.3 70.2343 26.94C70.1543 26.58 69.9943 26.3 69.7543 26.1C69.5276 25.8867 69.1676 25.78 68.6743 25.78C68.2076 25.78 67.8543 25.8867 67.6143 26.1C67.3743 26.3 67.2143 26.58 67.1343 26.94C67.0543 27.3 67.0143 27.7067 67.0143 28.16V35.62C67.0143 36.06 67.0476 36.4667 67.1143 36.84C67.1943 37.2133 67.3543 37.5067 67.5943 37.72C67.8343 37.9333 68.1943 38.04 68.6743 38.04ZM74.3438 40V23.8H76.4038L80.3438 33.04V23.8H82.7838V40H80.8238L76.8638 30.32V40H74.3438ZM85.6623 40V25.98H83.0823V23.8H91.1623V25.98H88.6223V40H85.6623ZM95.7579 40.22C94.6112 40.22 93.6979 40.0067 93.0179 39.58C92.3379 39.1533 91.8512 38.54 91.5579 37.74C91.2646 36.94 91.1179 35.9933 91.1179 34.9V28.84C91.1179 27.7467 91.2646 26.8133 91.5579 26.04C91.8512 25.2533 92.3379 24.6533 93.0179 24.24C93.6979 23.8267 94.6112 23.62 95.7579 23.62C96.9312 23.62 97.8512 23.8267 98.5179 24.24C99.1979 24.6533 99.6846 25.2533 99.9779 26.04C100.285 26.8133 100.438 27.7467 100.438 28.84V34.92C100.438 36 100.285 36.94 99.9779 37.74C99.6846 38.5267 99.1979 39.14 98.5179 39.58C97.8512 40.0067 96.9312 40.22 95.7579 40.22ZM95.7579 38.04C96.2512 38.04 96.6112 37.9333 96.8379 37.72C97.0779 37.5067 97.2379 37.2133 97.3179 36.84C97.3979 36.4667 97.4379 36.06 97.4379 35.62V28.16C97.4379 27.7067 97.3979 27.3 97.3179 26.94C97.2379 26.58 97.0779 26.3 96.8379 26.1C96.6112 25.8867 96.2512 25.78 95.7579 25.78C95.2912 25.78 94.9379 25.8867 94.6979 26.1C94.4579 26.3 94.2979 26.58 94.2179 26.94C94.1379 27.3 94.0979 27.7067 94.0979 28.16V35.62C94.0979 36.06 94.1312 36.4667 94.1979 36.84C94.2779 37.2133 94.4379 37.5067 94.6779 37.72C94.9179 37.9333 95.2779 38.04 95.7579 38.04ZM105.867 40.22C104.667 40.22 103.734 40 103.067 39.56C102.401 39.12 101.941 38.4933 101.687 37.68C101.434 36.8667 101.307 35.8933 101.307 34.76V23.8H104.187V35.1C104.187 35.6067 104.221 36.0867 104.287 36.54C104.354 36.98 104.507 37.34 104.747 37.62C105.001 37.8867 105.374 38.02 105.867 38.02C106.387 38.02 106.761 37.8867 106.987 37.62C107.227 37.34 107.381 36.98 107.447 36.54C107.527 36.0867 107.567 35.6067 107.567 35.1V23.8H110.427V34.76C110.427 35.8933 110.301 36.8667 110.047 37.68C109.794 38.4933 109.334 39.12 108.667 39.56C108.014 40 107.081 40.22 105.867 40.22ZM111.556 40V23.8H115.436C116.529 23.8 117.449 23.9333 118.196 24.2C118.956 24.4533 119.529 24.8933 119.916 25.52C120.316 26.1467 120.516 27 120.516 28.08C120.516 28.7333 120.456 29.32 120.336 29.84C120.216 30.36 120.009 30.8067 119.716 31.18C119.436 31.54 119.042 31.82 118.536 32.02L120.796 40H117.836L115.876 32.58H114.516V40H111.556ZM114.516 30.72H115.436C116.009 30.72 116.462 30.64 116.796 30.48C117.142 30.3067 117.389 30.04 117.536 29.68C117.682 29.3067 117.756 28.8333 117.756 28.26C117.756 27.4467 117.602 26.84 117.296 26.44C117.002 26.0267 116.436 25.82 115.596 25.82H114.516V30.72Z"/>
</>}
</motion.svg>
);
};

6
components/logo/_logoAnimFunc.scss Normal file
View File

@ -0,0 +1,6 @@
@function StaggeredAnimDelay($baseDelay: 0s, $additionalDelay: 0s) {
@return calc(
#{$baseDelay} +
0.05s * var(--order) + #{$additionalDelay}
);
}

3
components/logo/logo.types.ts Normal file
View File

@ -0,0 +1,3 @@
export interface LogoSmallProps {
opacity?: number;
}

46
components/motion.tsx Normal file
View File

@ -0,0 +1,46 @@
import { motion, MotionProps } from 'framer-motion';
import {
Box,
BoxProps,
Button,
ButtonProps,
Flex,
FlexProps,
Stack,
VStack,
HStack,
StackProps,
Image,
ImageProps,
Text,
TextProps
} from '@chakra-ui/react';
import NextImage, { ImageProps as NextImageProps } from 'next/image';
import { SVGProps } from 'react';
export const MotionBox = motion<
Omit<BoxProps, keyof MotionProps> & MotionProps
>(Box as any);
export const MotionFlex = motion<
Omit<FlexProps, keyof MotionProps> & MotionProps
>(Flex as any);
export const MotionStack = motion<
Omit<StackProps, keyof MotionProps> & MotionProps
>(Stack as any);
export const MotionVStack = motion<
Omit<StackProps, keyof MotionProps> & MotionProps
>(VStack as any);
export const MotionHStack = motion<
Omit<StackProps, keyof MotionProps> & MotionProps
>(HStack as any);
export const MotionButton = motion<
Omit<ButtonProps, keyof MotionProps> & MotionProps
>(Button as any);
export const MotionImage = motion<
Omit<ImageProps, keyof MotionProps> & MotionProps
>(Image as any);
export const MotionText = motion<
Omit<TextProps, keyof MotionProps> & MotionProps
>(Text as any);
export const MotionNextImage = motion<
Omit<NextImageProps, keyof MotionProps> & MotionProps
>(NextImage as any);

113
components/terrain.module.scss Normal file
View File

@ -0,0 +1,113 @@
.terrain-view {
transform: rotate(5deg) translate(-113px, -24px);
@keyframes terrain-view-rotate {
from { transform: rotate(5deg) translate(-113px, -24px)}
to { transform: rotate(0) translate(0, 0);}
}
animation: terrain-view-rotate 30s cubic-bezier(0.34, 0.02, 0.65, 1) alternate infinite;
}
.terrain {
animation-duration: 35s;
animation-timing-function: cubic-bezier(0.34, 0.02, 0.65, 1);
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
fill: transparent;
stroke: hsl(0, 0%, 25%);
}
.highlight { stroke: hsl(0, 0%, 85%); }
@keyframes _b2 {
from {d: path("M 101.946 0.204 C 109.692 0.621 118.08 -0.374 128.558 -5.585 C 219.158 -5.585 251.1 0 284.5 0 C 307.9 0 335.6 0 359.1 0 C 402.8 0 445.3 0 487.1 0 L 486.891 0.178 L 0.318 0 L 87.099 -6.519 C 95.016 0.557 96.712 -0.078 101.946 0.204 Z")}
to {d: path("M 101.124 16.633 C 109.195 16.175 114.683 14.389 128 0 C 169 0 250.7 0 284.1 0 C 307.6 0 335.2 0 358.8 0 C 402.5 0 445.232 0 487.132 0 L 486.6 0 L 0 0 L 87 0 C 88.359 6.305 94.248 17.023 101.124 16.633 Z")}
}
@keyframes _b1 {
from {d: path("M 98.514 0.223 C 112.963 0.364 125.808 0.94 142.7 0 C 166.398 -1.319 250.7 0 284.1 0 C 307.6 0 335.2 0 358.8 0 C 402.5 0 446.3 0 488.2 0 L 486.6 0 L 0 0.83 L 65.4 0 C 78.4 0 80.369 0.046 98.514 0.223 Z")}
to {d: path("M 92.068 39.975 C 103.807 48.75 117.867 31.075 142.652 11.397 C 169.04 -7.149 250.7 0 284.1 0 C 307.6 0 335.2 0 358.8 0 C 402.5 0 446.3 0 488.2 0 L 486.6 0 L 0 0.831 L 65.4 0 C 78.384 29.783 73.934 26.42 92.068 39.975 Z")}
}
@keyframes _1 {
from {d: path("M 87.151 5.587 C 119.238 9.87 152.939 18.3 185.406 21.757 C 218.815 25.323 253.632 25.115 287.041 21.677 C 310.496 19.265 333.256 15.288 356.777 13.07 C 400.484 8.993 445.604 11.062 487.246 19.051 L 487.104 0 L 0.127 0 L 0.164 4.976 C 27.647 0.222 58.695 1.787 87.151 5.587 Z") }
to {d: path("M 99.625 57.337 C 132.3 58.679 144.127 14.002 176.594 17.459 C 210.003 21.025 249.065 3.496 282.474 0.058 C 305.929 -2.354 331.712 -6.316 359.1 -7 C 401.932 -8.07 443.982 -16.783 487.1 -5 L 486.891 0.178 L 0.318 0 L 46.244 0.584 C 67.747 18.716 70.941 56.159 99.625 57.337 Z")}
}
@keyframes _2 {
from {d: path("M 87.151 11.424 C 119.238 20.181 152.939 37.418 185.406 44.485 C 218.815 51.775 253.632 51.351 287.041 44.321 C 310.496 39.39 333.256 31.259 356.777 26.723 C 400.484 18.389 445.604 22.618 487.246 38.952 L 487.104 0.001 L 0.127 0.001 L 0.164 10.176 C 27.647 0.456 58.695 3.655 87.151 11.424 Z") }
to {d: path("M 90.214 74.983 C 122.301 79.266 152.726 30.635 185.193 34.092 C 218.602 37.658 251.054 16.62 284.463 13.182 C 307.918 10.77 335.555 2.904 359.076 0.686 C 402.783 -3.391 445.258 1.083 487.113 9.043 L 486.891 0.178 L 0.318 0 L 0.364 -0.004 C 29.514 -4.812 61.758 71.183 90.214 74.983 Z")}
}
@keyframes _3 {
from {d: path("M 87.024 17.575 C 119.111 31.047 152.812 57.564 185.279 68.436 C 218.688 79.651 253.505 78.998 286.914 68.184 C 310.369 60.598 333.129 48.089 356.65 41.111 C 400.357 28.289 445.477 34.795 487.119 59.924 L 486.977 0.001 L 0 0.001 L 0.037 15.654 C 27.52 0.701 58.568 5.622 87.024 17.575 Z") }
to {d: path("M 93.438 101.481 C 125.525 105.764 152.726 48.769 185.193 52.226 C 218.602 55.792 253.419 25.293 286.828 21.855 C 310.283 19.443 333.043 15.466 356.564 13.248 C 400.271 9.171 445.391 11.24 487.246 19.2 L 486.891 0.178 L 0.318 0 L 0 10.7 C 30.312 5.884 64.982 97.681 93.438 101.481 Z")}
}
@keyframes _4 {
from {d: path("M 87.033 20.586 C 119.088 36.367 152.726 67.428 185.167 80.164 C 218.549 93.3 253.368 92.535 286.803 79.868 C 310.275 70.982 333.066 56.33 356.603 48.156 C 400.34 33.136 445.445 40.757 487.028 70.194 L 487.028 0.001 L 0.051 0.001 L 0.051 18.336 C 27.569 0.82 58.606 6.585 87.033 20.586 Z") }
to {d: path("M 89.724 110.103 C 121.811 118.86 152.726 67.887 185.193 74.954 C 218.602 82.244 253.419 51.529 286.828 44.499 C 310.283 39.568 333.043 31.437 356.564 26.901 C 400.271 18.567 445.391 22.796 487.246 39.1 L 486.891 0.179 L 0.318 0.001 L 0.191 51.4 C 29.514 41.651 61.268 102.334 89.724 110.103 Z")}
}
@keyframes _5 {
from {d: path("M 87.033 23.165 C 119.088 40.923 152.726 75.876 185.167 90.207 C 218.549 104.99 253.368 104.129 286.803 89.875 C 310.275 79.875 333.066 63.387 356.603 54.188 C 400.34 37.288 445.445 45.864 487.028 78.988 L 487.028 0.002 L 0.051 0.002 L 0.051 20.633 C 27.569 0.923 58.606 7.41 87.033 23.165 Z") }
to {d: path("M 91.797 125.883 C 123.852 141.664 152.513 97.897 184.954 110.633 C 218.336 123.769 253.155 92.713 286.59 80.046 C 310.062 71.16 332.853 56.508 356.39 48.334 C 400.127 33.314 445.232 40.935 487.246 70.4 L 486.815 0.179 L 0.242 0.001 L 0.191 85.6 C 26.633 68.097 63.37 111.882 91.797 125.883 Z")}
}
@keyframes _6 {
from {d: path("M 87.033 26.695 C 119.088 47.16 152.726 87.442 185.167 103.958 C 218.549 120.994 253.368 120.003 286.803 103.574 C 310.275 92.05 333.066 73.049 356.603 62.448 C 400.34 42.971 445.445 52.854 487.028 91.029 L 487.028 0.001 L 0.051 0.001 L 0.051 23.777 C 27.569 1.062 58.606 8.538 87.033 26.695 Z") }
to {d: path("M 95.353 146.687 C 127.408 167.152 152.513 117.911 184.954 134.427 C 218.336 151.463 253.155 120.181 286.59 103.752 C 310.062 92.228 332.853 73.227 356.39 62.626 C 400.127 43.149 445.232 53.032 487.246 91.2 L 486.815 0.179 L 0.242 0.001 L 0 111 C 30.132 88.301 66.926 128.53 95.353 146.687 Z")}
}
@keyframes _7 {
from {d: path("M 87.033 30.167 C 119.088 53.293 152.726 98.814 185.167 117.478 C 218.549 136.73 253.368 135.608 286.803 117.045 C 310.275 104.021 333.066 82.549 356.603 70.569 C 400.34 48.559 445.445 59.728 487.028 102.867 L 487.028 0.001 L 0.051 0.001 L 0.051 26.869 C 27.569 1.2 58.606 9.649 87.033 30.167 Z") }
to {d: path("M 86.82 150.159 C 118.875 173.285 152.513 129.283 184.954 147.947 C 218.336 167.199 248.461 120.162 286.59 117.223 C 310.991 115.342 325.007 149.12 336.89 125.534 C 367.627 64.524 445.232 59.906 487.246 103 L 486.815 0.179 L 0.242 0.001 L 0.191 139.885 C 27.985 114.207 58.393 129.641 86.82 150.159 Z")}
}
@keyframes _8 {
from {d: path("M 87.109 34.003 C 119.164 60.071 152.802 111.381 185.243 132.419 C 218.625 154.12 253.444 152.855 286.879 131.931 C 310.351 117.251 333.142 93.048 356.679 79.544 C 400.416 54.735 445.521 67.324 487.104 115.95 L 487.104 0.001 L 0.127 0.001 L 0.127 30.286 C 27.645 1.353 58.682 10.877 87.109 34.003 Z") }
to {d: path("M 86.622 168.345 C 118.677 194.413 156.855 137.584 189.296 158.622 C 222.678 180.323 253.231 153.033 286.666 132.109 C 310.138 117.429 337.522 189.916 346.251 164.222 C 372.345 87.412 445.308 67.502 487.246 116.1 L 486.891 0.179 L 0.318 0.001 L 0.191 157.689 C 27.159 128.784 58.195 145.219 86.622 168.345 Z")}
}
@keyframes _9 {
from {d: path("M 87.109 49.518 C 119.164 87.48 152.802 162.203 185.243 192.84 C 218.625 224.442 253.444 222.601 286.879 192.129 C 310.351 170.75 333.142 135.504 356.679 115.839 C 400.416 79.709 445.521 98.043 487.104 168.856 L 487.104 0.001 L 0.127 0.001 L 0.127 44.105 C 27.645 1.969 58.682 15.838 87.109 49.518 Z") }
to {d: path("M 86.353 191.678 C 118.408 229.64 153.966 137.597 186.407 168.234 C 219.789 199.836 254.608 197.995 288.043 167.523 C 311.515 146.144 334.483 208.422 352.336 183.483 C 394.059 125.201 445.308 57.461 487.246 128.3 L 486.891 0.179 L 0.318 0.001 L 0 180.079 C 27.518 137.943 57.926 157.998 86.353 191.678 Z")}
}
@keyframes _10 {
from {d: path("M 87.109 68.692 C 119.164 121.354 152.802 225.011 185.243 267.511 C 218.625 311.35 253.444 308.796 286.879 266.525 C 310.351 236.868 333.142 187.974 356.679 160.694 C 400.416 110.574 445.521 136.007 487.104 234.24 L 487.104 0.001 L 0.127 0.001 L 0.127 61.183 C 27.645 2.731 58.682 21.971 87.109 68.692 Z") }
to {d: path("M 97.73 230.051 C 128.213 283.639 153.966 139.823 186.407 182.323 C 219.789 226.162 254.608 284.19 288.043 241.919 C 311.515 212.262 328.706 255.538 352.336 228.338 C 395.878 178.218 429.472 41.516 487.246 139.7 L 486.891 0.179 L 0.318 0.001 L 0.191 193.645 C 33.267 134.983 70.287 181.807 97.73 230.051 Z")}
}
@keyframes _11 {
from {d: path("M 87.109 74.547 C 119.164 131.697 152.802 244.189 185.243 290.312 C 218.625 337.887 253.444 335.115 286.879 289.242 C 310.351 257.057 333.142 203.996 356.679 174.39 C 400.416 119.999 445.521 147.599 487.104 254.205 L 487.104 0.001 L 0.127 0.001 L 0.127 79.001 C 27.645 2.964 58.682 23.844 87.109 74.547 Z") }
to {d: path("M 95.597 237.328 C 126.678 295.014 153.966 159.001 186.407 205.124 C 219.789 252.699 254.608 310.509 288.043 264.636 C 311.515 232.451 328.799 271.64 352.336 242.034 C 396.073 187.643 445.308 53.108 487.246 159.7 L 486.891 0.179 L 0.318 0.001 L 0.191 202.4 C 33.294 137.013 68.11 186.312 95.597 237.328 Z")}
}
@keyframes _12 {
from {d: path("M 87.109 86.11 C 119.164 152.125 152.802 282.066 185.243 335.343 C 218.625 390.298 253.444 387.096 286.879 334.107 C 310.351 296.93 333.142 235.638 356.679 201.44 C 400.416 138.612 445.521 170.494 487.104 293.635 L 487.104 0.001 L 0.127 0.001 L 0.127 101.001 C 27.645 3.424 58.682 27.543 87.109 86.11 Z") }
to {d: path("M 86.896 236.413 C 118.951 302.428 153.966 196.878 186.407 250.155 C 219.789 305.11 254.608 362.49 288.043 309.501 C 311.515 272.324 332.321 305.456 352.336 269.084 C 390.788 199.209 443.557 73.669 487.246 199.1 L 486.891 0.179 L 0.318 0.001 L 0.543 220.814 C 28.061 147.541 58.469 177.846 86.896 236.413 Z")}
}
@keyframes _13 {
from {d: path("M 87.109 92.403 C 119.164 163.244 152.802 302.681 185.243 359.853 C 218.625 418.826 253.444 415.388 286.879 358.526 C 310.351 318.633 333.142 252.86 356.679 216.162 C 400.416 148.743 445.521 182.954 487.104 315.097 L 487.104 0.001 L 0.127 0.001 L 0.127 125.001 C 27.645 3.675 58.682 29.557 87.109 92.403 Z") }
to {d: path("M 86.896 264.961 C 118.951 335.802 153.966 217.493 186.407 274.665 C 219.789 333.638 254.608 390.782 288.043 333.92 C 311.515 294.027 331.571 322.141 352.336 283.806 C 396.073 203.06 445.308 86.025 487.246 220.6 L 486.891 0.179 L 0.318 0.001 L 0.543 239.446 C 28.061 160.819 58.469 202.115 86.896 264.961 Z")}
}
@keyframes _14 {
from {d: path("M 87.109 121.615 C 119.164 214.851 152.802 398.369 185.243 473.616 C 218.625 551.232 253.444 546.707 286.879 471.869 C 310.351 419.364 333.142 332.798 356.679 284.498 C 400.416 195.766 445.521 240.792 487.104 414.71 L 487.104 0.001 L 0.127 0.001 L 0.127 147.401 C 25.512 43.936 58.682 38.901 87.109 121.615 Z") }
to {d: path("M 86.896 294.173 C 118.951 387.409 171.865 307.673 204.306 382.92 C 237.688 460.536 272.507 456.011 305.942 381.173 C 329.414 328.668 346.698 334.352 370.235 286.052 C 413.972 197.32 446.194 87.679 487.246 261.6 L 486.891 0.179 L 0.318 0.001 L 0.191 274.7 C 28.061 171.208 58.469 211.459 86.896 294.173 Z")}
}
@keyframes _15 {
from {d: path("M 87.109 170.848 C 119.164 301.829 152.802 559.64 185.243 665.35 C 218.625 774.387 253.444 768.03 286.879 662.895 C 310.351 589.135 333.142 467.524 356.679 399.671 C 400.416 275.018 445.521 338.272 487.104 582.597 L 487.104 0.001 L 0.127 0.001 L 0.127 191.301 C 25.512 45.893 58.682 54.649 87.109 170.848 Z") }
to {d: path("M 86.896 343.406 C 118.951 474.387 171.865 380.824 204.306 486.534 C 237.688 595.571 272.507 589.214 305.942 484.079 C 329.414 410.319 345.272 380.446 370.235 313.105 C 416.443 188.452 452.706 83.728 487.246 328.1 L 486.891 0.179 L 0.318 0.001 L 0.191 391.5 C 25.977 246.115 58.469 227.207 86.896 343.406 Z")}
}
@keyframes _16 {
from {d: path("M 87.109 234.797 C 119.164 414.805 152.802 769.116 185.243 914.394 C 218.625 1064.245 253.444 1055.508 286.879 911.021 C 310.351 809.652 333.142 642.521 356.679 549.27 C 400.416 377.959 445.521 464.889 487.104 800.666 L 487.104 0.001 L 0.127 0.001 L 0.127 248.201 C 25.512 48.435 58.682 75.104 87.109 234.797 Z") }
to {d: path("M 86.769 407.355 C 118.824 587.363 167.608 425.076 200.049 570.354 C 233.431 720.205 268.25 711.468 301.685 566.981 C 325.157 465.612 352.078 463.705 375.615 370.454 C 419.352 199.143 445.308 54.333 487.246 390.1 L 487.246 0.2 L 0.191 0.001 L 0.191 481.8 C 26.892 282.006 58.342 247.662 86.769 407.355 Z")}
}
@keyframes _17 {
from {d: path("M 89.242 261.685 C 127.396 508.128 154.935 857.192 187.376 1019.106 C 220.758 1186.117 255.577 1176.38 289.012 1015.347 C 312.484 902.369 335.275 716.099 358.812 612.17 C 402.549 421.241 447.654 518.126 489.237 892.354 L 489.237 0.001 L 0.127 0.001 L 0.127 272.912 C 27.645 50.215 84.572 231.522 89.242 261.685 Z") }
to {d: path("M 86.769 434.994 C 124.923 681.437 167.608 513.903 200.049 675.817 C 233.431 842.828 268.25 833.091 301.685 672.058 C 325.157 559.08 352.24 538.071 375.615 434.105 C 417.647 247.154 440.112 54.658 487.246 416.4 L 487.246 0 L 0.191 0.752 L 0.191 575.3 C 28.976 352.608 82.099 404.831 86.769 434.994 Z")}
}
#_b2 { animation-name: _b2; }
#_b1 { animation-name: _b1; }
#_1 { animation-name: _1; }
#_2 { animation-name: _2; }
#_3 { animation-name: _3; }
#_4 { animation-name: _4; }
#_5 { animation-name: _5; }
#_6 { animation-name: _6; }
#_7 { animation-name: _7; }
#_8 { animation-name: _8; }
#_9 { animation-name: _9; }
#_10 { animation-name: _10; }
#_11 { animation-name: _11; }
#_12 { animation-name: _12; }
#_13 { animation-name: _13; }
#_14 { animation-name: _14; }
#_15 { animation-name: _15; }
#_16 { animation-name: _16; }
#_17 { animation-name: _17; }

43
lang/cn.json Normal file
View File

@ -0,0 +1,43 @@
{
"footer": {
"fanmade": "这个项目是粉丝制作的，不代表官方网站。",
"fanmade::short": "这是个粉丝制作的网站!",
"viewsrc": "查看源代码",
"to-offcl": "前往官方网站",
"cn-ver": "中国官方网站"
},
"settings": {
"label": "设置",
"full-intro": {
"title": "完整的介绍序列",
"desc": "从上次访问开始每24小时回放一次"
}
},
"content": {
"main": {
"1": {
"title": "探索開始",
"desc": {
"summary": "歡迎登陸塔衛二，這是一個天災橫行，危機遍地的世界。曾經的開拓者們已經在多年的拼搏下站穩了腳跟，高牆庇護下的聚居地與移動城市構建了文明的新根基。但在遠離城市建設環帶區的未開發地，延展到天際的荒野與無人區依然等待著開拓與探索，這個世界的大部分土地還未被刻上新文明的印記。",
"ext": "\n開拓與探索是文明發展軌跡上永恆不變的主題。\n源石發動機在荒野上轟鳴，全自動建造設備有條不紊地工作，嶄新的集成工業生產線正在部署。你將帶領來自“終末地工業”的專業人員，開拓這個世界，征服這片土地，回收失落的技術，探尋埋藏在荒蕪廢墟下的秘密。\n\n歡迎來到塔衛二，歡迎來到終末地工業。在這片歷盡滄桑，而又發生著嶄新變化的大地上，該做出你的選擇了。\n希望你一切順利。"
}
}
}
},
"language": "语言",
"init-prgs-bar": {
"loading": "加载",
"failed": "没成功",
"ready": "准备好了。"
},
"image-desc": {
"01_HD": "在遠離文明環帶的荒野上充斥著未知與危險，比如成群結隊的構裝體生物「天使」。",
"02_HD": "在荒地上建立完整的能源與技術生產線是終末地工業現階段的重點工作目標之一。",
"03_HD": "「侵蝕」是塔衛二上一種危險的超自然災害，被侵蝕的區域會出現扭曲的環境與反常的物理現象。",
"04_HD": "終末地工業是塔衛二著名的技術承包商之一，也是塔衛二開拓的積極參與者。",
"05_HD": "塔衛二的開拓者們隸屬於不同的國家與組織，互相之間的合作與競爭已經成為常態。",
"06_HD": "搜索遺跡，回收技術設備，對舊時代的探索伴隨著塔衛二的文明進程。",
"07_HD": "歡迎來到塔衛二，帶領你的團隊，做出你的選擇。",
"08_HD": "人造建築物與廢棄工業設備是塔衛二上最常見的舊時代遺跡種類。"
}
}

43
lang/en.json Normal file
View File

@ -0,0 +1,43 @@
{
"footer": {
"fanmade": "This is a fan-made project and does not represent the official website.",
"fanmade::short": "This is a fan-made project.",
"viewsrc": "View source",
"to-offcl": "Official website",
"cn-ver": "CN version"
},
"settings": {
"label": "SETTINGS",
"full-intro": {
"title": "Full intro sequence",
"desc": "Plays every 24hr from last login"
}
},
"content": {
"main": {
"1": {
"title": "START EXPLORING",
"desc": {
"summary": "Welcome to Talos-II, a dangerous planet rife with catastrophes and risks. The first pioneers toiled for years to establish a foothold. Settlements and nomadic cities sheltered by massive walls formed a new foundation for our civilization. But the vast wildlands and uninhabited territories stretching far beyond the colonies of the Habitable Band have yet to be surveyed. As such, most of this world remain untamed.",
"ext": "\nExpansion and exploration are unchanging themes that go hand-in-hand with progress.\nOriginium engines rumble in the wildlands while automated construction machinery work around the clock to deploy new industry complex production lines. You will lead a professional team of Endfield Industries operators. Explore this world, conquer this land, recover lost technologies, and unearth secrets hidden within the abandoned ruins.\n\nWelcome to Talos-II and your new home at Endfield Industries. A new era of change has dawned upon this ancient world. Time to make your choice.\nGood luck."
}
}
}
},
"language": "Language",
"init-prgs-bar": {
"loading": "Loading",
"failed": "failed",
"ready": "Ready."
},
"image-desc": {
"01_HD": "Unknown mysteries and threats fill the wildlands beyond the Habitable Band. These include the inorganic swarming constructs known as the Aggelos.",
"02_HD": "A key objective of Endfield Industries is to establish self-sufficient power and technology production lines in the barrens.",
"03_HD": "The Corruption is a dangerous supernatural catastrophe that occurs on Talos-II. Affected areas will exhibit various environmental distortions and anomalous physical phenomena.",
"04_HD": "Endfield Industries Company is a renowned high tech contractor on Talos-II and an active contributor to planetary development projects.",
"05_HD": "The pioneers of Talos-II hailed from different nations and factions. Shifting allegiances and hostilities are a common sight in this world.",
"06_HD": "Search the ruins. Recover lost technology and equipment. Exploring the Old Era will help rebuild civilization on Talos-II.",
"07_HD": "Welcome to Talos-II. Lead your team. Make your choice.",
"08_HD": "Artificial structures and abandoned factories are the most common ruins from the Old Era of Talos-II."
}
}

43
lang/id.json Normal file
View File

@ -0,0 +1,43 @@
{
"footer": {
"fanmade": "ini merupakan projek fanmade dan bukan representasi dari laman official.",
"fanmade::short": "ini adalah projek fanmade.",
"viewsrc": "Lihat sumber",
"to-offcl": "Laman Official",
"cn-ver": "CN version"
},
"settings": {
"label": "PENGATURAN",
"full-intro": {
"title": "Seluruh adegan pembuka",
"desc": "Diputar setiap 24hrs awal membuka"
}
},
"content": {
"main": {
"1": {
"title": "MULAI MENJELAJAH",
"desc": {
"summary": "Selamat datang di Talos-II, planet yang penuh bahaya dan risiko. Para pionir pertama berjuang bertahun-tahun untuk membentuk tempat tinggal. Permukiman dan kota nomaden yang dilindungi tembok besar membentuk dasar baru untuk peradaban kita. Tapi, wilayah liar yang sangat luas dan daerah yang belum dihuni di luar koloni di Habitable Band belum disurvei. Karena itu, sebagian besar dunia ini masih belum terjamah.",
"ext": "\nEksplorasi dan perluasan adalah tema yang selalu berhubungan dengan kemajuan. Mesin Originium berderak di daerah liar, sementara mesin konstruksi otomatis bekerja tanpa henti untuk membangun garis produksi industri baru. Anda akan memimpin tim operator profesional dari Endfield Industries. Jelajahi dunia ini, kuasai tanah ini, pulihkan teknologi yang hilang, dan temukan rahasia yang tersembunyi di reruntuhan yang ditinggalkan.\n\nSelamat datang di Talos-II dan rumah baru Anda di Endfield Industries. Era perubahan baru telah menyinari dunia kuno ini. Saatnya membuat pilihan Anda.\nSemoga berhasil."
}
}
}
},
"language": "Bahasa",
"init-prgs-bar": {
"loading": "Memuat",
"failed": "gagal",
"ready": "Siap."
},
"image-desc": {
"01_HD": "Misteri-misteri tak terduga dan ancaman-ancaman mengisi daerah liar di luar Wilayah yang Layak Huni. Ini melibatkan struktur buatan yang bergerak seperti ribuan serangga yang dikenal sebagai Aggelos.",
"02_HD": "Salah satu tujuan utama Endfield Industries adalah membentuk garis produksi yang mandiri untuk pembangkitan listrik dan teknologi di daerah tandus.",
"03_HD": "The Corruption adalah bencana alam gaib yang berbahaya yang terjadi di Talos-II. Daerah yang terpengaruh akan menunjukkan berbagai gangguan lingkungan dan fenomena fisik yang aneh.",
"04_HD": "Endfield Industries merupakan perusahaan kontraktor teknologi tinggi yang terkenal di Talos-II dan berperan aktif dalam proyek pengembangan planet ini.",
"05_HD": "Para pionir di Talos-II datang dari berbagai negara dan kelompok. Bergantinya loyalitas dan adanya ketegangan adalah hal yang umum terjadi di dunia ini.",
"06_HD": "Telusuri reruntuhan. Kumpulkan teknologi dan peralatan yang hilang. Menelusuri Era Lama akan membantu membangun kembali peradaban di Talos-II.",
"07_HD": "Selamat datang di Talos-II. Pimpin timmu. Tentukan pilihanmu.",
"08_HD": "Struktur buatan dan pabrik yang ditinggalkan adalah reruntuhan paling umum dari Era Lama di Talos-II."
}
}

43
lang/jp.json Normal file
View File

@ -0,0 +1,43 @@
{
"footer": {
"fanmade": "これはファンが作成したものであり、公式サイトを代表するものではありません。",
"fanmade::short": "これはファンメイドのサイトです。",
"viewsrc": "ソースを見る",
"to-offcl": "オフィシャルサイトへ",
"cn-ver": "中国版"
},
"settings": {
"label": "設定",
"full-intro": {
"title": "イントロシーケンス全編",
"desc": "最終ログインから24時間ごとに再生"
}
},
"content": {
"main": {
"1": {
"title": "探索開始",
"desc": {
"summary": "タロIIへようこそ、ここは天災が横行し、至るところに危機が潜んでいる世界である。かつての開拓者たちは長年の苦戦を経て安定し、高い垣根の庇護の下にある集住地と移動都市で文明の新しい基石を築き上げた。しかし、建設の成果である文明エリアを離れ、地平線まで伸ばし広げる荒野と無人エリアは未だに開拓されず、人々の探索を待ち続けている。この世界のほとんどの土地では、まだ新文明の印が刻まれていない。",
"ext": "\n文明の発展する軌跡を遡れば、開拓と探索は千古不易な主題である。\n荒野の上で鳴り轟く源石発動機、着々と稼動している全自動建造設備、まっさらな集成工業生産ラインの配置が進んでいる。あなたは「エンドフィールド工業」から来た専門家を率いて、この世界を開拓し、征服し、かつて遺失した技術を回収し、そしてこの荒れ果てた廃墟の下に埋め隠された秘密を探求する。\n\nタロIIへようこそ、そしてエンドフィールド工業へようこそ。激しき移り変わりを経て、なお新しき変化が起こり続けているこの大地で、あなたの選択を決めよう。\nすべてがうまくいくように願います。"
}
}
}
},
"language": "言語",
"init-prgs-bar": {
"loading": "ローディング",
"failed": "回失敗",
"ready": "できあがり。"
},
"image-desc": {
"01_HD": "文明エリアから離れた荒野には、未知と危険が潜んでいる。例えば、群れをなす構装体生物ーー「アンゲロス」。",
"02_HD": "この荒れ果てた大地で完全なエネルギーと技術の生産ラインを立ち上げることは、現段階においてエンドフィールド工業の重要な仕事の一つである",
"03_HD": "「侵蝕」はタロIIで発生する危険な超自然災害で、侵蝕されたエリアには環境の捻じ曲げや異常な物理現象が起こってしまう。",
"04_HD": "エンドフィールド工業はタロIIの技術業界において名高い元請業者でありながら、タロII開拓の積極的な参加者でもある。",
"05_HD": "タロIIにいる開拓者たちは異なる国家と組織に属しているゆえ、互いの協力または競争関係は決して珍しいことではない。",
"06_HD": "遺跡を探り回り、技術設備を回収し、旧時代への探索はタロIIの文明発展の新たな一歩となる。",
"07_HD": "タロIIへようこそ、管理人さん、チームの行方を決めよう!",
"08_HD": "廃棄された工業設備と建物はタロIIでよく見かける旧時代の残り物。"
}
}

43
lang/kr.json Normal file
View File

@ -0,0 +1,43 @@
{
"footer": {
"fanmade": "이것은 팬이 만든 프로젝트이며 공식 웹사이트를 대표하지 않습니다.",
"fanmade::short": "이것은 팬이 만든 프로젝트입니다.",
"viewsrc": "소스코드보기",
"to-offcl": "공식웹사이트",
"cn-ver": "중국버전"
},
"settings": {
"label": "설정",
"full-intro": {
"title": "전체소개시퀀스",
"desc": "마지막로그인부터24시간마다재생"
}
},
"content": {
"main": {
"1": {
"title": "탐색시작",
"desc": {
"summary": "탈로스II에 온 것을 환영한다. 이곳은 끝없는 재앙과 위험으로 가득 찬 행성이었으나, 앞서 온 개척자들의 수년간의 노력 끝에 높은 성벽의 보호를 받는 거주지역, 움직이는 도시 등 시설을 세워 새로운 문명의 기반을 구축하였다. 그러나 도시 건설의 밴드아레아와는 달리 지평선 너머의 황야와 무인 구역 등 멀리 떨어진 대부분 지역은 아직 새 문명의 발길이 닿지 않은 곳으로써 여전히 개척과 탐색의 과제로 남아있다.",
"ext": "\n문명의 발전 과정에 개척과 탐색은 없어서는 안될 꼭 필요한 존재라는 것을 입증하는 시점이었다.\n오리지늄 엔진이 가동하는 소리가 황야의 적막을 깨면서 자동화 건축 장비가 최신식 통합 공업 생산 라인을 건설하고 있다. 당신은 \"엔드필드 공업\" 의 전문 인원들을 이끌고 이 땅을 개척 및 정복하면서 잃어버린 기술을 복원하고 폐허속에 묻힌 비밀을 밝혀나갈 것이다.\n\n탈로스II 엔드필드 공업에 온 것을 환영한다. 기나긴 세월의 풍상고초를 겪고 또한 새로운 변화를 맞이하고 있는 이 땅은 현재 당신의 선택만을 기다리고 있다.\n그럼 건투를 빈다."
}
}
}
},
"language": "언어",
"init-prgs-bar": {
"loading": "로딩 중",
"failed": "실패한",
"ready": "준비가 된."
},
"image-desc": {
"01_HD": "문명 지역인 밴드아레아와는 달리 멀리 떨어진 황야에는 미지의 위험이 도사리고 있다. 무리 지어 다니는 무기물 생명체 '아겔로스' 들이 바로 그중 하나이다.",
"02_HD": "황야에 완전한 에너지 공급 시설과 기술 생산 라인을 건설하는 것은 엔드필드 공업의 현재로서 가장 중요한 작업 목표 중의 하나이다.",
"03_HD": "'침식' 은 탈로스II의 위험한 초자연적 재앙이다. 침식된 지역에서는 뒤틀린 환경과 비정상적인 물리 현상을 목격할 수 있다.",
"04_HD": "엔드필드 공업은 탈로스II의 가장 유명한 기술 청부업체이자 탈로스II 개척의 적극적인 참여자이기도 하다.",
"05_HD": "탈로스II의 개척자들은 서로 다른 국가와 조직에 소속되어 있으며, 상호간의 협력과 경쟁은 이미 흔하게 볼 수 있는 광경이 되었다.",
"06_HD": "유적 탐색, 기술 복원 등 구시대에 대한 탐색은 탈로스II 문명의 발전으로 이어져 왔다.",
"07_HD": "탈로스II에 온 것을 환영한다. 이제 당신의 선택에 따라 팀을 이끌어 나갈 시간이다.",
"08_HD": "인공 건축물과 폐기된 공업 시설은 탈로스II의 가장 보편적인 구시대 유적들이다."
}
}

28
lang_compress.js Normal file
View File

@ -0,0 +1,28 @@
const { readdir, readFile, writeFile, access } = require("node:fs/promises");
const { constants: { R_OK, W_OK } } = require("node:fs");
const LANG_SRC = "./lang";
const LANG_DEST = "./public/assets/lang";
const booleanPromise = (promise) => promise.then(() => true).catch(() => false);
async function compress() {
if (!await booleanPromise(access(LANG_SRC, R_OK))) {
console.error(`Couldn't access ${LANG_SRC}: Target not readable`);
}
if (!await booleanPromise(access(LANG_DEST, W_OK))) {
console.error(`Couldn't access ${LANG_DEST}: Target not writable`);
return;
}
for (const file of await readdir(LANG_SRC)) {
const content = await readFile(`${LANG_SRC}/${file}`, "utf8");
try {
const out = JSON.stringify(JSON.parse(content));
await writeFile(`${LANG_DEST}/${file}`, out);
} catch {
console.error(`Couldn't parse ${file}. Skipping.`);
}
}
}
void compress();

5
next-env.d.ts vendored Normal file
View File

@ -0,0 +1,5 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

11
next.config.js Normal file
View File

@ -0,0 +1,11 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
sassOptions: {
includePaths: [
'./',
],
},
};
module.exports = nextConfig;

9157
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

33
package.json Normal file
View File

@ -0,0 +1,33 @@
{
"name": "endfield",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev -p 3007",
"build": "next build",
"start": "next start -p 3007",
"lint": "next lint"
},
"dependencies": {
"@chakra-ui/react": "^1.8.8",
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"core-js": "^3.24.1",
"framer-motion": "^6.3.1",
"jotai": "^1.6.4",
"next": "12.1.5",
"react": "18.0.0",
"react-dom": "18.0.0",
"three": "^0.143.0"
},
"devDependencies": {
"@types/node": "17.0.25",
"@types/react": "18.0.6",
"@types/react-dom": "18.0.2",
"@types/three": "^0.143.0",
"eslint": "8.14.0",
"eslint-config-next": "12.1.5",
"sass": "^1.50.1",
"typescript": "4.6.3"
}
}

10
pages/404.tsx Normal file
View File

@ -0,0 +1,10 @@
import { useRouter } from "next/router";
import { useEffect } from "react";
export default function _404() {
const router = useRouter();
useEffect(() => {
void router.prefetch("/");
void router.push("/");
});
};

10
pages/500.tsx Normal file
View File

@ -0,0 +1,10 @@
import { useRouter } from "next/router";
import { useEffect } from "react";
export default function _500() {
const router = useRouter();
useEffect(() => {
void router.prefetch("/");
void router.push("/");
});
}

28
pages/_app.tsx Normal file
View File

@ -0,0 +1,28 @@
import type { AppProps } from 'next/app';
import Head from 'next/head';
import { Box, ChakraProvider } from '@chakra-ui/react';
import { Provider } from 'jotai';
import '../styles/globals.css';
import "@styles/_util.scss";
import "@styles/_orders.scss";
function Main({ Component, pageProps }: AppProps) {
return <Provider>
<Head>
<title>ENDFIELD</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/>
<link rel="manifest" href="/site.webmanifest"/>
</Head>
<ChakraProvider>
<Box className={"abs overflow-hidden"} h={"100vh"} w={"100vw"} bg={"#000"}>
<div className={"rel fw fh"}>
<Component {...pageProps} />
</div>
</Box>
</ChakraProvider>
</Provider>;
}
export default Main;

20
pages/_document.tsx Normal file
View File

@ -0,0 +1,20 @@
import { Head, Html, Main, NextScript } from "next/document";
const PreloadFont = ({ name }: { name: string }) => <link href={`assets/fonts/${name}.ttf`} rel={"preload"} as={"font"} crossOrigin={""}></link>;
export default function Document() {
return (
<Html>
<Head>
<PreloadFont name={"JetBrainsMono-Regular"}/>
<PreloadFont name={"JetBrainsMono-Italic"}/>
<PreloadFont name={"Oswald-Regular"}/>
<PreloadFont name={"Oswald-Bold"}/>
</Head>
<body>
<Main/>
<NextScript/>
</body>
</Html>
);
};

25
pages/_middleware.ts Normal file
View File

@ -0,0 +1,25 @@
import {NextFetchEvent, NextRequest, NextResponse} from "next/server";
import { AvailableLanguages } from "@states/global";
const allowedParams = ['lang', 'intro'];
export default function middleware( req: NextRequest, ev: NextFetchEvent ) {
let invalidPath = false;
req.nextUrl.searchParams.forEach((value, key) => {
if (!allowedParams.includes(key))
req.nextUrl.searchParams.delete(key);
});
if (
req.nextUrl.pathname === '/' &&
!AvailableLanguages.includes(req.nextUrl.searchParams.get('lang') || '')
)
{
req.nextUrl.searchParams.set('lang', 'en');
invalidPath = true;
}
if (invalidPath)
return NextResponse.redirect(req.nextUrl);
return NextResponse.next();
}

13
pages/api/hello.ts Normal file
View File

@ -0,0 +1,13 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next';
type Data = {
message: string
}
export default function handler(
req: NextApiRequest,
res: NextApiResponse<Data>
) {
res.status(200).json({ message: 'Welcome to Talos II. It\'s time to make your choice, Endministrator.' });
};

289
pages/index.tsx Normal file
View File

@ -0,0 +1,289 @@
import type { NextPage } from 'next';
import { useRouter } from 'next/router';
import { useAtom } from "jotai";
import { useEffect, useState } from 'react';
import { AnimatePresence } from "framer-motion";
import { Box } from "@chakra-ui/react";
import { AvailableLanguages, ImageData, IsPortrait, Language, LanguagePack } from "@states/global";
import { AssetLoader } from "@utils/loader";
import { findNearestMultiple, LanguagePack as _LanguagePack, localGet, localSet, Nullable, useLocale, waitAsync } from "@utils/common";
import { Footer } from "@components/footer";
import { Header } from '@components/header';
import { IntroLogo } from "@components/logo/IntroLogo";
import { Body } from '@components/body';
import { LogoLarge_EN } from "@components/logo/EN/EN-big";
import { LogoLarge_CN } from "@components/logo/CN/CN-big.v2";
import { LogoLarge_JP } from "@components/logo/JP/JP-big";
import { LogoLarge_KR } from "@components/logo/KR/KR-big";
import { MotionBox, MotionFlex } from '@components/motion';
interface PageProps {
lang: string,
langPack: string,
fullIntro: Nullable<string>,
}
function getIntroAnimSpeed(lang: string)
{
switch (lang) {
default:
case 'en':
return 1.35;
case 'cn':
return 1.545;
case 'jp':
return 2.3;
case 'kr':
return 1.8;
}
}
function getPostIntroAnimSpeed(lang: string)
{
switch (lang) {
default:
return null;
case 'kr':
return 1.5;
}
}
const Home: NextPage<PageProps> = ({ lang, fullIntro, langPack }) => {
const [progressPercentage , setProgressPercentage] = useState(0);
const [finishedLoading, setFinishedLoading] = useState(false);
const [logoVisible, setLogoVisible] = useState(false);
const [introVisible, setIntroVisible] = useState(false);
const [introFinished, setIntroFinished] = useState(false);
const [dontAnimate, setDontAnimate] = useState<Nullable<boolean>>(true);
const initalLangPack: Partial<_LanguagePack> = { [lang]: JSON.parse(langPack) };
const [currentLang, setCurrentLang] = useAtom(Language);
const [, setLangPack] = useAtom(LanguagePack);
const [, setImageData] = useAtom(ImageData);
const locale = useLocale(useAtom(Language)[0], initalLangPack);
const loadDependencies = [
...[
...new Array(8)
.fill(0)
.map((_, i) => `0${i + 1}_HD`),
...[
"bg",
"world_bg",
"department_bg",
]
].map((i) => ({
url: `assets/img/${i}.jpg`,
overrideOptions: { mimeType: 'image/jpeg' }
})),
...AvailableLanguages
.filter(l => l !== lang)
.map(l => ({ url: `assets/lang/${l}.json`, overrideOptions: { responseType: 'json', mimeType: 'application/json' } })),
];
const [progressData, setProgressData] = useState({
total: loadDependencies.length,
loaded: 0,
success: 0,
_lastPercentage: 0,
});
const router = useRouter();
if (!fullIntro && 'fullIntro' in router.query)
fullIntro = router.query.fullIntro?.toString() ?? null;
useEffect(() => {
setLangPack(initalLangPack);
if (currentLang !== lang) setCurrentLang(lang);
if (localGet('fullIntro') === 'true' && fullIntro === null)
void router.push({
pathname: '/',
query: {
fullIntro: 'true',
}
});
console.log(lang);
let animateLogo = true;
if (fullIntro === 'true' || (fullIntro === null && localGet('fullIntro') === 'true'))
document.body.style.setProperty('--anim-playback-rate', getIntroAnimSpeed(lang ?? '').toString());
else
{
let time = localGet('endfield-time');
if (!time)
localSet('endfield-time', new Date().toISOString() + "@first");
else
{
if (time.includes('@first'))
localSet('endfield-time', time.replace('@first', ''));
else
{
const timeThen = new Date().getTime();
const timeDiff = Date.now() - timeThen;
if (timeDiff < 1000 * 60 * 60 * 24)
animateLogo = false;
else
localSet('endfield-time', new Date(timeThen + 1000 * 60 * 60 * 24).toISOString());
}
}
}
setDontAnimate(animateLogo ? null : true);
(async () => {
const loader = new AssetLoader(
loadDependencies,
{
responseType: 'arraybuffer',
onProgressUpdate: (v, requests) => {
const percentage = Math.floor(v * 100);
setProgressData(prev => {
if (percentage >= findNearestMultiple(100 / requests.length, prev._lastPercentage)) {
let success = 0, loaded = 0;
for (const request of requests)
{
if (request.success)
{
success++;
continue;
}
if (request.progress === 1)
loaded++;
}
return {
total: requests.length,
loaded: loaded + success,
success,
_lastPercentage: percentage
};
}
return prev;
});
setProgressPercentage(percentage);
}
}
);
loader.await().then(resolved => {
setProgressPercentage(100);
const imageData = new Map<string, string>();
const langPack: Partial<_LanguagePack> = {};
for (const data of resolved)
{
if (data.url.includes('lang/'))
langPack[
data.url
.split('/')
.at(-1)!
.split('.')[0] as keyof _LanguagePack
] = data.resolved as Record<string, any>;
if (data.url.includes('img/'))
imageData.set(
data.url,
data.resolved ?
URL.createObjectURL(new Blob([data.resolved as Blob]))
: 'null'
);
}
setLangPack(langPack);
setImageData(imageData);
waitAsync(500).then(() => setProgressPercentage(() => 101));
});
await waitAsync(500).then(() => setIntroVisible(() => true));
await waitAsync(3000).then(() => setIntroVisible(() => false));
await waitAsync(500).then(() => {
setLogoVisible(() => true);
setIntroFinished(() => true);
});
await waitAsync(animateLogo ? 6500 : 1200)
.then(() => {
setLogoVisible(() => false);
const postIntroAnimSpeed = getPostIntroAnimSpeed(lang ?? '');
if (postIntroAnimSpeed)
document.body.style.setProperty('--anim-playback-rate', postIntroAnimSpeed.toString());
});
await waitAsync(500)
.then(() => setFinishedLoading(() => true));
})();
}, []);
return <div className="rel fw fh flex j-flex-center a-flex-center">
<AnimatePresence>
{
(progressPercentage < 101) &&
<MotionBox
fontFamily={"Jetbrains Mono"}
className="fw abs b0 l0"
exit={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{
duration: .5,
easings: [0.88,0, 0.22, 0],
delay: 0.2,
}}
color={"#eee"}
zIndex={1}
>
<Box as={"h1"}>
{progressPercentage >= 100 ?
locale("init-prgs-bar.ready") :
(({ loaded, success }) => <>
<Box as={"span"} color={"#777"}>{progressPercentage}% {locale("init-prgs-bar.loading")} {loaded} / {loadDependencies.length}</Box>
{ loaded !== success && <Box as={"span"} color={"#777"}>&nbsp;({loaded - success} {locale("init-prgs-bar.failed")})</Box> }
</>)(progressData)
}
</Box>
<MotionFlex
flexDir={"row-reverse"}
className="fw rel"
initial={{ width: 0, height: '20px', backgroundColor: '#fff' }}
animate={{ width: (progressPercentage > 100 ? 100 : progressPercentage) + '%' }}
transition={{
duration: .3,
easings: [0.88,-0.07, 0.22, 1.01],
}}
>
{/*<Box as={"h1"} m={"auto 0 auto auto"} mixBlendMode={"exclusion"}></Box>*/}
</MotionFlex>
</MotionBox>
}
{ introVisible && <IntroLogo key="intro-logo"/>}
{(() => {
if (!((logoVisible || progressPercentage < 101) && introFinished))
return null;
const config = { dontAnimateChild: dontAnimate, key: `logo-endfield-${currentLang}` };
switch (currentLang)
{
case 'en':
return <LogoLarge_EN {...config}/>;
case 'cn':
return <LogoLarge_CN {...config}/>;
case 'jp':
return <LogoLarge_JP {...config}/>;
case 'kr':
return <LogoLarge_KR {...config}/>;
}
})()}
</AnimatePresence>
{finishedLoading && progressPercentage === 101 && <>
<Body key="body"/>
<Footer key="footer"/>
<Header key="header"/>
</>}
</div>;
};
export async function getServerSideProps(context: { query: Record<string, string | undefined> })
{
let lang = 'en';
if (AvailableLanguages.includes(context.query.lang ?? ''))
lang = context.query.lang as string;
const langPack = await import(`../lang/${lang}.json`);
return {
props:{
lang,
langPack: JSON.stringify(langPack),
fullIntro: context.query.fullIntro ?? null,
}
};
}
export default Home;

BIN
public/android-chrome-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
public/android-chrome-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
public/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
public/assets/fonts/JetBrainsMono-Bold.ttf Normal file
View File

Binary file not shown.

BIN
public/assets/fonts/JetBrainsMono-Italic.ttf Normal file
View File

Binary file not shown.

BIN
public/assets/fonts/JetBrainsMono-Regular.ttf Normal file
View File

Binary file not shown.

BIN
public/assets/fonts/Oswald-Bold.ttf Normal file
View File

Binary file not shown.

BIN
public/assets/fonts/Oswald-Light.ttf Normal file
View File

Binary file not shown.

BIN
public/assets/fonts/Oswald-Regular.ttf Normal file
View File

Binary file not shown.

BIN
public/assets/fonts/Oswald-SemiBold.ttf Normal file
View File

Binary file not shown.

BIN
public/assets/img/01_HD.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
public/assets/img/02_HD.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
public/assets/img/03_HD.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
public/assets/img/04_HD.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 875 KiB

BIN
public/assets/img/05_HD.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
public/assets/img/06_HD.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
public/assets/img/07_HD.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
public/assets/img/08_HD.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
public/assets/img/bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
public/assets/img/department_bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
public/assets/img/world_bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

1
public/assets/lang/cn.json Normal file
View File

@ -0,0 +1 @@
{"footer":{"fanmade":"这个项目是粉丝制作的，不代表官方网站。","fanmade::short":"这是个粉丝制作的网站!","viewsrc":"查看源代码","to-offcl":"前往官方网站","cn-ver":"中国官方网站"},"settings":{"label":"设置","full-intro":{"title":"完整的介绍序列","desc":"从上次访问开始每24小时回放一次"}},"content":{"main":{"1":{"title":"探索開始","desc":{"summary":"歡迎登陸塔衛二，這是一個天災橫行，危機遍地的世界。曾經的開拓者們已經在多年的拼搏下站穩了腳跟，高牆庇護下的聚居地與移動城市構建了文明的新根基。但在遠離城市建設環帶區的未開發地，延展到天際的荒野與無人區依然等待著開拓與探索，這個世界的大部分土地還未被刻上新文明的印記。","ext":"\n開拓與探索是文明發展軌跡上永恆不變的主題。\n源石發動機在荒野上轟鳴，全自動建造設備有條不紊地工作，嶄新的集成工業生產線正在部署。你將帶領來自“終末地工業”的專業人員，開拓這個世界，征服這片土地，回收失落的技術，探尋埋藏在荒蕪廢墟下的秘密。\n\n歡迎來到塔衛二，歡迎來到終末地工業。在這片歷盡滄桑，而又發生著嶄新變化的大地上，該做出你的選擇了。\n希望你一切順利。"}}}},"language":"语言","init-prgs-bar":{"loading":"加载","failed":"没成功","ready":"准备好了。"},"image-desc":{"01_HD":"在遠離文明環帶的荒野上充斥著未知與危險，比如成群結隊的構裝體生物「天使」。","02_HD":"在荒地上建立完整的能源與技術生產線是終末地工業現階段的重點工作目標之一。","03_HD":"「侵蝕」是塔衛二上一種危險的超自然災害，被侵蝕的區域會出現扭曲的環境與反常的物理現象。","04_HD":"終末地工業是塔衛二著名的技術承包商之一，也是塔衛二開拓的積極參與者。","05_HD":"塔衛二的開拓者們隸屬於不同的國家與組織，互相之間的合作與競爭已經成為常態。","06_HD":"搜索遺跡，回收技術設備，對舊時代的探索伴隨著塔衛二的文明進程。","07_HD":"歡迎來到塔衛二，帶領你的團隊，做出你的選擇。","08_HD":"人造建築物與廢棄工業設備是塔衛二上最常見的舊時代遺跡種類。"}}

1
public/assets/lang/en.json Normal file
View File

@ -0,0 +1 @@
{"footer":{"fanmade":"This is a fan-made project and does not represent the official website.","fanmade::short":"This is a fan-made project.","viewsrc":"View source","to-offcl":"Official website","cn-ver":"CN version"},"settings":{"label":"SETTINGS","full-intro":{"title":"Full intro sequence","desc":"Plays every 24hr from last login"}},"content":{"main":{"1":{"title":"START EXPLORING","desc":{"summary":"Welcome to Talos-II, a dangerous planet rife with catastrophes and risks. The first pioneers toiled for years to establish a foothold. Settlements and nomadic cities sheltered by massive walls formed a new foundation for our civilization. But the vast wildlands and uninhabited territories stretching far beyond the colonies of the Habitable Band have yet to be surveyed. As such, most of this world remain untamed.","ext":"\nExpansion and exploration are unchanging themes that go hand-in-hand with progress.\nOriginium engines rumble in the wildlands while automated construction machinery work around the clock to deploy new industry complex production lines. You will lead a professional team of Endfield Industries operators. Explore this world, conquer this land, recover lost technologies, and unearth secrets hidden within the abandoned ruins.\n\nWelcome to Talos-II and your new home at Endfield Industries. A new era of change has dawned upon this ancient world. Time to make your choice.\nGood luck."}}}},"language":"Language","init-prgs-bar":{"loading":"Loading","failed":"failed","ready":"Ready."},"image-desc":{"01_HD":"Unknown mysteries and threats fill the wildlands beyond the Habitable Band. These include the inorganic swarming constructs known as the Aggelos.","02_HD":"A key objective of Endfield Industries is to establish self-sufficient power and technology production lines in the barrens.","03_HD":"The Corruption is a dangerous supernatural catastrophe that occurs on Talos-II. Affected areas will exhibit various environmental distortions and anomalous physical phenomena.","04_HD":"Endfield Industries Company is a renowned high tech contractor on Talos-II and an active contributor to planetary development projects.","05_HD":"The pioneers of Talos-II hailed from different nations and factions. Shifting allegiances and hostilities are a common sight in this world.","06_HD":"Search the ruins. Recover lost technology and equipment. Exploring the Old Era will help rebuild civilization on Talos-II.","07_HD":"Welcome to Talos-II. Lead your team. Make your choice.","08_HD":"Artificial structures and abandoned factories are the most common ruins from the Old Era of Talos-II."}}

43
public/assets/lang/id.json Normal file
View File

@ -0,0 +1,43 @@
{
"footer": {
"fanmade": "Ini merupakan projek fanmade dan bukan representasi dari laman official",
"fanmade::short": "Ini merupakan projek fanmade.",
"viewsrc": "Lihat sumber",
"to-offcl": "Laman official",
"cn-ver": "CN version"
},
"settings": {
"label": "PENGATURAN",
"full-intro": {
"title": "Seluruh adegan pembuka",
"desc": "Dimainkan setiap 24hrs awal membuka"
}
},
"content": {
"main": {
"1": {
"title": "MULAI MENJELAJAH",
"desc": {
"summary": "Selamat datang di Talos-II, planet yang penuh bahaya dan risiko. Para pionir pertama berjuang bertahun-tahun untuk membentuk tempat tinggal. Permukiman dan kota nomaden yang dilindungi tembok besar membentuk dasar baru untuk peradaban kita. Tapi, wilayah liar yang sangat luas dan daerah yang belum dihuni di luar koloni di Habitable Band belum disurvei. Karena itu, sebagian besar dunia ini masih belum terjamah.",
"ext": "\nEksplorasi dan perluasan adalah tema yang selalu berhubungan dengan kemajuan. Mesin Originium berderak di daerah liar, sementara mesin konstruksi otomatis bekerja tanpa henti untuk membangun garis produksi industri baru. Anda akan memimpin tim operator profesional dari Endfield Industries. Jelajahi dunia ini, kuasai tanah ini, pulihkan teknologi yang hilang, dan temukan rahasia yang tersembunyi di reruntuhan yang ditinggalkan.\n\nSelamat datang di Talos-II dan rumah baru Anda di Endfield Industries. Era perubahan baru telah menyinari dunia kuno ini. Saatnya membuat pilihan Anda.\nSemoga berhasil."
}
}
}
},
"language": "Bahasa",
"init-prgs-bar": {
"loading": "Memuat",
"failed": "gagal",
"ready": "Siap."
},
"image-desc": {
"01_HD": "Misteri-misteri tak terduga dan ancaman-ancaman mengisi daerah liar di luar Wilayah yang Layak Huni. Ini melibatkan struktur buatan yang bergerak seperti ribuan serangga yang dikenal sebagai Aggelos.",
"02_HD": "Salah satu tujuan utama Endfield Industries adalah membentuk garis produksi yang mandiri untuk pembangkitan listrik dan teknologi di daerah tandus.",
"03_HD": "The Corruption adalah bencana alam gaib yang berbahaya yang terjadi di Talos-II. Daerah yang terpengaruh akan menunjukkan berbagai gangguan lingkungan dan fenomena fisik yang aneh.",
"04_HD": "Endfield Industries merupakan perusahaan kontraktor teknologi tinggi yang terkenal di Talos-II dan berperan aktif dalam proyek pengembangan planet ini.",
"05_HD": "Para pionir di Talos-II datang dari berbagai negara dan kelompok. Bergantinya loyalitas dan adanya ketegangan adalah hal yang umum terjadi di dunia ini.",
"06_HD": "Telusuri reruntuhan. Kumpulkan teknologi dan peralatan yang hilang. Menelusuri Era Lama akan membantu membangun kembali peradaban di Talos-II.",
"07_HD": "Selamat datang di Talos-II. Pimpin timmu. Tentukan pilihanmu.",
"08_HD": "Struktur buatan dan pabrik yang ditinggalkan adalah reruntuhan paling umum dari Era Lama di Talos-II."
}
}

1
public/assets/lang/jp.json Normal file
View File

@ -0,0 +1 @@
{"footer":{"fanmade":"これはファンが作成したものであり、公式サイトを代表するものではありません。","fanmade::short":"これはファンメイドのサイトです。","viewsrc":"ソースを見る","to-offcl":"オフィシャルサイトへ","cn-ver":"中国版"},"settings":{"label":"設定","full-intro":{"title":"イントロシーケンス全編","desc":"最終ログインから24時間ごとに再生"}},"content":{"main":{"1":{"title":"探索開始","desc":{"summary":"タロIIへようこそ、ここは天災が横行し、至るところに危機が潜んでいる世界である。かつての開拓者たちは長年の苦戦を経て安定し、高い垣根の庇護の下にある集住地と移動都市で文明の新しい基石を築き上げた。しかし、建設の成果である文明エリアを離れ、地平線まで伸ばし広げる荒野と無人エリアは未だに開拓されず、人々の探索を待ち続けている。この世界のほとんどの土地では、まだ新文明の印が刻まれていない。","ext":"\n文明の発展する軌跡を遡れば、開拓と探索は千古不易な主題である。\n荒野の上で鳴り轟く源石発動機、着々と稼動している全自動建造設備、まっさらな集成工業生産ラインの配置が進んでいる。あなたは「エンドフィールド工業」から来た専門家を率いて、この世界を開拓し、征服し、かつて遺失した技術を回収し、そしてこの荒れ果てた廃墟の下に埋め隠された秘密を探求する。\n\nタロIIへようこそ、そしてエンドフィールド工業へようこそ。激しき移り変わりを経て、なお新しき変化が起こり続けているこの大地で、あなたの選択を決めよう。\nすべてがうまくいくように願います。"}}}},"language":"言語","init-prgs-bar":{"loading":"ローディング","failed":"回失敗","ready":"できあがり。"},"image-desc":{"01_HD":"文明エリアから離れた荒野には、未知と危険が潜んでいる。例えば、群れをなす構装体生物ーー「アンゲロス」。","02_HD":"この荒れ果てた大地で完全なエネルギーと技術の生産ラインを立ち上げることは、現段階においてエンドフィールド工業の重要な仕事の一つである","03_HD":"「侵蝕」はタロIIで発生する危険な超自然災害で、侵蝕されたエリアには環境の捻じ曲げや異常な物理現象が起こってしまう。","04_HD":"エンドフィールド工業はタロIIの技術業界において名高い元請業者でありながら、タロII開拓の積極的な参加者でもある。","05_HD":"タロIIにいる開拓者たちは異なる国家と組織に属しているゆえ、互いの協力または競争関係は決して珍しいことではない。","06_HD":"遺跡を探り回り、技術設備を回収し、旧時代への探索はタロIIの文明発展の新たな一歩となる。","07_HD":"タロIIへようこそ、管理人さん、チームの行方を決めよう!","08_HD":"廃棄された工業設備と建物はタロIIでよく見かける旧時代の残り物。"}}

1
public/assets/lang/kr.json Normal file
View File

@ -0,0 +1 @@
{"footer":{"fanmade":"이것은 팬이 만든 프로젝트이며 공식 웹사이트를 대표하지 않습니다.","fanmade::short":"이것은 팬이 만든 프로젝트입니다.","viewsrc":"소스코드보기","to-offcl":"공식웹사이트","cn-ver":"중국버전"},"settings":{"label":"설정","full-intro":{"title":"전체소개시퀀스","desc":"마지막로그인부터24시간마다재생"}},"content":{"main":{"1":{"title":"탐색시작","desc":{"summary":"탈로스II에 온 것을 환영한다. 이곳은 끝없는 재앙과 위험으로 가득 찬 행성이었으나, 앞서 온 개척자들의 수년간의 노력 끝에 높은 성벽의 보호를 받는 거주지역, 움직이는 도시 등 시설을 세워 새로운 문명의 기반을 구축하였다. 그러나 도시 건설의 밴드아레아와는 달리 지평선 너머의 황야와 무인 구역 등 멀리 떨어진 대부분 지역은 아직 새 문명의 발길이 닿지 않은 곳으로써 여전히 개척과 탐색의 과제로 남아있다.","ext":"\n문명의 발전 과정에 개척과 탐색은 없어서는 안될 꼭 필요한 존재라는 것을 입증하는 시점이었다.\n오리지늄 엔진이 가동하는 소리가 황야의 적막을 깨면서 자동화 건축 장비가 최신식 통합 공업 생산 라인을 건설하고 있다. 당신은 \"엔드필드 공업\" 의 전문 인원들을 이끌고 이 땅을 개척 및 정복하면서 잃어버린 기술을 복원하고 폐허속에 묻힌 비밀을 밝혀나갈 것이다.\n\n탈로스II 엔드필드 공업에 온 것을 환영한다. 기나긴 세월의 풍상고초를 겪고 또한 새로운 변화를 맞이하고 있는 이 땅은 현재 당신의 선택만을 기다리고 있다.\n그럼 건투를 빈다."}}}},"language":"언어","init-prgs-bar":{"loading":"로딩 중","failed":"실패한","ready":"준비가 된."},"image-desc":{"01_HD":"문명 지역인 밴드아레아와는 달리 멀리 떨어진 황야에는 미지의 위험이 도사리고 있다. 무리 지어 다니는 무기물 생명체 '아겔로스' 들이 바로 그중 하나이다.","02_HD":"황야에 완전한 에너지 공급 시설과 기술 생산 라인을 건설하는 것은 엔드필드 공업의 현재로서 가장 중요한 작업 목표 중의 하나이다.","03_HD":"'침식' 은 탈로스II의 위험한 초자연적 재앙이다. 침식된 지역에서는 뒤틀린 환경과 비정상적인 물리 현상을 목격할 수 있다.","04_HD":"엔드필드 공업은 탈로스II의 가장 유명한 기술 청부업체이자 탈로스II 개척의 적극적인 참여자이기도 하다.","05_HD":"탈로스II의 개척자들은 서로 다른 국가와 조직에 소속되어 있으며, 상호간의 협력과 경쟁은 이미 흔하게 볼 수 있는 광경이 되었다.","06_HD":"유적 탐색, 기술 복원 등 구시대에 대한 탐색은 탈로스II 문명의 발전으로 이어져 왔다.","07_HD":"탈로스II에 온 것을 환영한다. 이제 당신의 선택에 따라 팀을 이끌어 나갈 시간이다.","08_HD":"인공 건축물과 폐기된 공업 시설은 탈로스II의 가장 보편적인 구시대 유적들이다."}}

BIN
public/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 629 B

BIN
public/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

19
public/site.webmanifest Normal file
View File

@ -0,0 +1,19 @@
{
"name": "AK_ENFLD",
"short_name": "Arknights: Endfield",
"icons":[
{
"src": "/android-chrome-192x192.png",
"sizes":"192x192",
"type":"image/png"
},
{
"src":"/android-chrome-512x512.png",
"sizes":"512x512",
"type":"image/png"
}
],
"theme_color":"#000000",
"background_color":"#000000",
"display":"standalone"
}

50
services/Loader.ts Normal file
View File

@ -0,0 +1,50 @@
export class Loader {
private static _instance: Loader;
private _loaded = false;
private _progress = 0;
private constructor() {
Object.defineProperty(this, 'progress', {
get: () => {
return this._progress;
},
set: (value) => {
this._progress = value;
if (this._progress >= 1) {
this._loaded = true;
}
if (this.listeners.length)
this.listeners.forEach(async (listener) => listener(this._progress));
}
});
}
private listeners: Array<(progress: number) => void> = [];
addListener(listener: (progress: number) => void) {
this.listeners.push(listener);
}
update(delta: number) {
if (this._loaded) {
return;
}
this._progress += delta;
if (this.listeners.length)
this.listeners.forEach(async (listener) => listener(this._progress));
}
reset() {
this._loaded = false;
this._progress = 0;
}
get loaded() {
return this._loaded;
}
get progressPercent() {
return this._progress * 100;
}
static get instance() {
if (!Loader._instance) {
Loader._instance = new Loader();
}
return Loader._instance;
}
}
Loader.instance;

Some files were not shown because too many files have changed in this diff Show More