\r\n e.stopPropagation()}\r\n >\r\n
\r\n \r\n \r\n
\r\n Loading...
\r\n \r\n {children(opened)}\r\n
\r\n \r\n {bottom}\r\n
\r\n \r\n )}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {\r\n setMouseDownIndex(undefined);\r\n }}\r\n >\r\n {\r\n items.map((item, itemIndex) => {\r\n return (\r\n {\r\n setMouseDownIndex(itemIndex);\r\n }}\r\n onMouseUp={() => {\r\n if (mouseDownIndex === itemIndex) {\r\n if (mouseDownIndex == index) {\r\n setZoomedIndex(itemIndex);\r\n }\r\n else {\r\n setIndex(mouseDownIndex);\r\n }\r\n }\r\n setMouseDownIndex(undefined);\r\n }}\r\n >\r\n
\r\n );\r\n })\r\n }\r\n \r\n \r\n 
\r\n {\r\n item.youTubeVideo !== undefined &&\r\n
\r\n \r\n {\r\n items.map((item, itemIndex) => {\r\n return (\r\n goTo(itemIndex)}\r\n />\r\n );\r\n })\r\n }\r\n
\r\n {\r\n zoomedIndex !== undefined &&\r\n \r\n setIndex(index)}\r\n >\r\n {\r\n items.map((item, itemIndex) => {\r\n return (\r\n \r\n
\r\n );\r\n })\r\n }\r\n \r\n \r\n )}\r\n \r\n );\r\n}","import React from 'react';\r\nimport * as styles from \"../pages/index.module.scss\";\r\n\r\nconst height = 300;\r\n\r\nexport const TiltedSeparator = (props: {\r\n topDelta?: number,\r\n angle: number,\r\n leftColor?: string,\r\n mainColor: string,\r\n rightColor?: string,\r\n}) => {\r\n const { topDelta, angle, leftColor, mainColor, rightColor } = props;\r\n\r\n return (\r\n \r\n {\r\n item.image &&\r\n 
\r\n }\r\n {\r\n item.youTubeVideo && (\r\n 
\r\n )\r\n }\r\n {\r\n opened && item.youTubeVideo && index === itemIndex && (\r\n
\r\n \r\n
\r\n )\r\n }\r\n \r\n
\r\n );\r\n}\r\n","import React, { useState } from 'react';\r\nimport ReactResizeDetector from 'react-resize-detector';\r\n\r\nexport const VerticalExpander = (props: { expanded: boolean, children: React.ReactNode }) => {\r\n const { expanded, children } = props;\r\n\r\n const [childrenHeight, setChildrenHeight] = useState\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import classnames from 'classnames';\nimport { graphql } from 'gatsby';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport logoDrigtingLands from '../assets/logo-driftinglands.svg';\nimport logoForetales from '../assets/logo-foretales.svg';\nimport logoTranscripted from '../assets/logo-transcripted.svg';\nimport studioMember01 from '../assets/studio-member-01.png';\nimport studioMember02 from '../assets/studio-member-02.png';\nimport studioMember03 from '../assets/studio-member-03.png';\nimport studioMember04 from '../assets/studio-member-04.png';\nimport studioMember05 from '../assets/studio-member-05.png';\nimport { Anchor } from '../components/Anchor';\nimport { AnchorLink, useScrollOnHistory } from '../components/AnchorLink';\nimport { FullscreenContainer } from '../components/FullscreenContainer';\nimport { Gallery, IGalleryItem } from \"../components/Gallery\";\nimport { TiltedSeparator } from '../components/TiltedSeparator';\nimport { VerticalExpander } from '../components/VerticalExpander';\n// import { Wip } from '../components/Wip';\nimport { YouTubeVideoPlayer } from '../components/YouTubeVideoPlayer';\nimport * as styles from './index.module.scss';\n\nexport const query = graphql`\n query {\n currentBuildDate {\n currentDate\n }\n }\n`;\n\nexport default function Home(props: { data: { currentBuildDate: { currentDate: string } } }) {\n const { data } = props;\n\n useEffect(() => {\n console.log(`Build: ${data.currentBuildDate.currentDate}`);\n }, []);\n\n // return \r\n {children}\r\n
\r\n \n\n \n {(opened) => (\n opened &&
\n )\n}\n\nexport const Header = (props: { home: boolean }) => {\n const { home } = props;\n\n const sections = ['showreel', 'studio', 'games', 'services'];\n const [activeSection, setActiveSection] = useState\n
\n \n
\n \n
\n \n \n
\n \n \n
\n Play our Showreel!
\n \n \n
\n \n
\n \n The Studio\n
\n \n Alkemi is more than 10 years old now. We’re a small team of craft people\n making our own games and other visual stuff but mostly in the game industry.\n We make medium sized games, polished games, sometimes weird games and we\n focus on making stuff that you’ve probably never played before. We also\n work for others, bringing our technical and artistic expertise to create\n solutions, assets & tools.\n
\n \n
\n \n 
\n Alain Puget\n
\n \n 
\n Christophe Zerr\n
\n \n 
\n Pierre-Vincent Cabourg\n
\n \n 
\n Kevin Struillou\n
\n \n 
\n Anaïs Lehoux\n
\n \n
\n \n \n Foretales is a new kind of card game where narration and\n experimentation blend with deck mechanics. It’s currently in\n development and it will be awesome.\n \n What would happen if you ripped out the mindless mouse clicking\n of a modern Diablo-like and replaced it with an old school shootemup\n gameplay? If you keep the loot, the choice of skills and powers, the\n customization of your equipment, Drifting Lands will happen.\n \n Imagine a mix of Twin stick shooters with a match-3 game… Weird idea\n right? The crazy thing is that it actually works and will bend your\n brain in a few new and satisfying ways!\n
\n \n Our Games\n
\n \n
\n \n }\n galleryItems={[\n {\n thumbnail: 'games-foretales-00-thumb.jpg',\n youTubeVideo: {\n cover: 'games-foretales-00-cover.jpg',\n videoId: 'jaMqr33Wbhs'\n },\n },\n {\n thumbnail: 'games-foretales-01-thumb.jpg',\n image: 'games-foretales-01.jpg',\n },\n {\n thumbnail: 'games-foretales-02-thumb.jpg',\n image: 'games-foretales-02.jpg',\n },\n {\n thumbnail: 'games-foretales-03-thumb.jpg',\n image: 'games-foretales-03.jpg',\n },\n {\n thumbnail: 'games-foretales-04-thumb.jpg',\n image: 'games-foretales-04.jpg',\n },\n ]}\n />\n \n
\n \n }\n galleryItems={[\n {\n thumbnail: 'games-driftinglands-00-thumb.jpg',\n youTubeVideo: {\n cover: 'games-driftinglands-00-cover.jpg',\n videoId: 'QoLxZCYA_t4'\n },\n },\n {\n thumbnail: 'games-driftinglands-01-thumb.jpg',\n image: 'games-driftinglands-01.jpg',\n },\n {\n thumbnail: 'games-driftinglands-02-thumb.jpg',\n image: 'games-driftinglands-02.jpg',\n },\n {\n thumbnail: 'games-driftinglands-03-thumb.jpg',\n image: 'games-driftinglands-03.jpg',\n },\n {\n thumbnail: 'games-driftinglands-04-thumb.jpg',\n image: 'games-driftinglands-04.jpg',\n },\n ]}\n />\n \n
\n \n }\n galleryItems={[\n {\n thumbnail: 'games-transcripted-00-thumb.jpg',\n youTubeVideo: {\n cover: 'games-transcripted-00-cover.jpg',\n videoId: 'qXDiO8oCavM'\n },\n },\n {\n thumbnail: 'games-transcripted-01-thumb.jpg',\n image: 'games-transcripted-01.jpg',\n },\n {\n thumbnail: 'games-transcripted-02-thumb.jpg',\n image: 'games-transcripted-02.jpg',\n },\n {\n thumbnail: 'games-transcripted-03-thumb.jpg',\n image: 'games-transcripted-03.jpg',\n },\n {\n thumbnail: 'games-transcripted-04-thumb.jpg',\n image: 'games-transcripted-04.jpg',\n },\n ]}\n />\n \n \n \n \n \n
\n );\n}\n\nconst Services = () => {\n return (\n \n
\n \n 
\n
\n \n {text}\n
\n \n \n Tools & Dev Support\n \n }\n text={\n <>\n To manage large amounts of game data or assets, we make our own\n tools: sometimes in Unity for asset management, but mostly web\n based tools to create multi-users collaborative editors synchronized\n with the game. If you’re struggling to create friendly environments\n for narrative design, game balancing, localization… maybe we can help.\n \n }\n />\n \n VFX & Tech Art\n \n }\n text={\n <>\n Our favorite challenge? “How to make the final game look like the\n original amazing concept arts”. We bend shaders and rendering to\n create original, cool looking and consistent art styles for our\n games or yours.\n\n We’re more or less all technical artists here, so we do a lot of\n Fizzzzzzz, BOOM, KzzKzzzz... always with minimum processing power\n and texture size.\n \n }\n />\n \n Trailers & Promo Art\n \n }\n text={\n
\n \n Our Services\n
\n \n We’ve been working in the digital marketing industry for more than\n a decade now. Doing trailers, video ads, banners, website skins for\n small indie games and huge AAA games. We know how to make cool visual\n stuff for all kinds of budgets whatever the starting material may be.\n For years, we’ve been doing most of those cool things with our friends\n at Biborg, one of the\n top creative agencies for the gaming industry.\n
\n }\n />\n\n
\n );\n}\n\nconst Footer = () => {\n return (\n \n
\n \n \n
\n \n
\n \n {title}\n
\n {text}\n \n
\n \n Alkemi - 2020\n
\n