docs: Raymarching blog post

MaximeHeckel · Sep 10, 2023 · ef57107 · ef57107
1 parent 6e98fbe
commit ef57107
Show file tree

Hide file tree

Showing 28 changed files with 3,989 additions and 18 deletions.
diff --git a/content/cubic-bezier-from-math-to-motion.mdx b/content/cubic-bezier-from-math-to-motion.mdx
@@ -353,9 +353,7 @@ I hope this blog post satisfied your curiosity and helped you learn some of the
 
 Quick shoutout to **3 awesome people who helped me directly or indirectly to produce this piece** by sharing their own creations around this subject:
 
-- [@pixelbeat](https://twitter.com/pixelbeat/) who created an awesome Framer prototype to visualize easing curves:
-
-<StaticTweet id="1450570908838645763" />
+- [@pixelbeat](https://twitter.com/pixelbeat/) who created an awesome Framer prototype to visualize easing curves
 
 - [@nansdotio](https://twitter.com/nansdotio) who built a super slick [CSS transition visualizer](https://css-transitions-sandbox-narendras.vercel.app/)
 

diff --git a/content/painting-with-math-a-gentle-study-of-raymarching.mdx b/content/painting-with-math-a-gentle-study-of-raymarching.mdx
diff --git a/core/components/Code/Sandpack.tsx b/core/components/Code/Sandpack.tsx
@@ -62,9 +62,6 @@ const SandpackWrapper = styled(Box, {
  display: 'block',
  },
  '@media (max-width: 1200px)': {
- /**
- * Make it fullbleed!
- */
  width: '100vw',
  left: '50%',
  right: '50%',
@@ -159,9 +156,9 @@ const Sandpack = (props: SandpackProps) => {
  justifyContent="space-between"
  css={{
  height: defaultEditorOptions.editorHeight,
- width: '50%',
  gap: 0,
- '@media (max-width: 770px)': {
+ width: '50%',
+ '@media (max-width: 880px)': {
  width: '100%',
  },
  }}
@@ -193,7 +190,6 @@ const Sandpack = (props: SandpackProps) => {
  {...defaultEditorOptions}
  showRunButton={false}
  style={{
- width: '50%',
  borderLeft: '1px solid var(--maximeheckel-border-color)',
  height: defaultEditorOptions.editorHeight,
  }}

diff --git a/core/components/MDX/MDXComponents.tsx b/core/components/MDX/MDXComponents.tsx
@@ -181,6 +181,10 @@ const DemoSearch = dynamic(() => import('./Widgets/SemanticSearch/DemoSearch'));
 
 const DemoButton = dynamic(() => import('./Widgets/SemanticSearch/DemoButton'));
 
+const RaymarchingVisualizer = dynamic(
+ () => import('./Widgets/Raymarching/RaymarchingVisualizer')
+);
+
 const RefractionDispersionSandpack = dynamic(
  () => import('./Widgets/RefractionDispersionReactThreeFiber/Sandpack')
 );
@@ -207,6 +211,10 @@ const AdvancedFramerMotionSandpack = dynamic(
  () => import('./Widgets/AdvancedFramerMotion/Sandpack')
 );
 
+const RaymarchingSandpack = dynamic(
+ () => import('./Widgets/Raymarching/Sandpack')
+);
+
 const customComponents = {
  AnimationTypes,
  ClipboardAnimationDetails,
@@ -248,6 +256,7 @@ const customComponents = {
  Formatting,
  DemoSearch,
  DemoButton,
+ RaymarchingVisualizer,
  // Sandpacks
  CSSCompositionSandpack,
  ScrollSpySandpack,
@@ -262,6 +271,7 @@ const customComponents = {
  ParticlesShaderSandpack,
  RefractionDispersionSandpack,
  RenderTargetsSandpack,
+ RaymarchingSandpack,
 };
 
 const MDXComponents = {

diff --git a/core/components/MDX/Widgets/Components.tsx b/core/components/MDX/Widgets/Components.tsx
@@ -34,7 +34,8 @@ export const HighlightedValue = styled('div', {
  padding: '2px 6px',
  fontFamily: 'var(--font-numeric)',
  fontSize: 'var(--font-size-2)',
- display: 'inline-block',
+ display: 'inline-flex',
+ justifyContent: 'center',
  lineHeight: '1rem',
 });