docs: Caustics blog post (#674)

content/immigrating-to-the-us-my-path.mdx

@@ -1,5 +1,5 @@
 ---
-title: 'Immigrating to the US: My path from non-immigrant to permanent resident'
+title: 'Immigrating to the US'
 subtitle: US immigration explained for American citizens by an immigrant.
 date: '2020-06-26T08:00:00.000Z'
 updated: '2020-06-29T08:00:00.000Z'

core/components/MDX/MDXComponents.tsx

@@ -220,6 +220,8 @@ const RaymarchingSandpack = dynamic(
  () => import('./Widgets/Raymarching/Sandpack')
 );
 
+const CausticsSandpack = dynamic(() => import('./Widgets/Caustics/Sandpack'));
+
 const customComponents = {
  AnimationTypes,
  ClipboardAnimationDetails,
@@ -279,6 +281,7 @@ const customComponents = {
  RefractionDispersionSandpack,
  RenderTargetsSandpack,
  RaymarchingSandpack,
+ CausticsSandpack,
 };
 
 const MDXComponents = {

core/components/MDX/Widgets/Caustics/Sandpack.tsx

@@ -0,0 +1,97 @@
+import { Box, useTheme } from '@maximeheckel/design-system';
+import Sandpack from '@core/components/Code/Sandpack';
+import useGPUTier from '@core/hooks/useGPUTier';
+import { useInView } from 'react-intersection-observer';
+import normalProjection from './normalProjection';
+import simpleCaustics from './simpleCaustics';
+import beautifulCaustics from './beautifulCaustics';
+import causticsPlane from './causticsPlane';
+import dynamicCaustics from './dynamicCaustics';
+
+const SceneCSSDark = `
+html {
+ background: #20222B;
+}
+
+body {
+ height: 100%;
+ margin: 0;
+}
+
+canvas {
+ width: 100vw;
+ height: 100vh;
+}`;
+
+const SceneCSSLight = `
+html {
+ background: #F7F7FB;
+}
+
+body {
+ height: 100%;
+ margin: 0;
+}
+
+canvas {
+ width: 100vw;
+ height: 100vh;
+}`;
+
+const CausticsSandpack = (props: any) => {
+ const { scene } = props;
+ const [ref, inView] = useInView();
+ const { dark } = useTheme();
+ const { tier, loading: tierLoading } = useGPUTier();
+
+ const autorun = tier > 2;
+
+ const SCENES = {
+ scene1: normalProjection,
+ scene2: simpleCaustics,
+ scene3: beautifulCaustics,
+ scene4: causticsPlane,
+ scene5: dynamicCaustics,
+ };
+
+ return (
+ <Box ref={ref}>
+ {inView && !tierLoading ? (
+ <Sandpack
+ autorun={autorun}
+ template="react"
+ dependencies={{
+ '@react-three/drei': '9.70.4',
+ '@react-three/fiber': '8.11.2',
+ leva: '0.9.31',
+ three: '0.149.0',
+ uuid: '^9.0.0',
+ }}
+ files={{
+ // @ts-ignore
+ ...SCENES[scene],
+ '/scene.css': {
+ code: !dark ? SceneCSSLight : SceneCSSDark,
+ hidden: true,
+ },
+ '/sandbox.config.json': {
+ code: `{ "infiniteLoopProtection" : false }`,
+ hidden: true,
+ },
+ }}
+ />
+ ) : (
+ <Box
+ css={{
+ height: '520px',
+ '@media(max-width: 750px)': {
+ height: '1060px',
+ },
+ }}
+ />
+ )}
+ </Box>
+ );
+};
+
+export default CausticsSandpack;