docs: Volumetric Raymarching blog post

content/framer-motion-layout-animations.mdx

@@ -25,7 +25,7 @@ keywords:
  ]
 slug: framer-motion-layout-animations
 type: 'blogPost'
-featured: true
+featured: false
 colorFeatured: 'linear-gradient(90deg,#2E83FF -10%,#EB7D9F 50%, #FFCBBE 100%)'
 fontFeatured: '#E8E8FD'
 ---

core/components/BeforeAfterImage/BeforeAfterImage.tsx

@@ -171,15 +171,25 @@ const BeforeAfterImage = (props: BeforeAfterImageProps) => {
  onMouseMove={handleMouseMove}
  onTouchMove={handleTouchMove}
  style={{
- width: width || '100%',
- height: height || '100%',
  // @ts-ignore
  '--progress': `${wiggleMotion.get()}%`,
  }}
  >
- <S.Image alt="Before" src={beforeSrc} />
+ <S.Image
+ alt="Before"
+ loading="eager"
+ src={beforeSrc}
+ width={width}
+ height={height}
+ />
  <S.Overlay>
- <S.Image alt="After" src={afterSrc} />
+ <S.Image
+ alt="After"
+ loading="eager"
+ src={afterSrc}
+ width={width}
+ height={height}
+ />
  </S.Overlay>
  <Slider />
  </S.Wrapper>

core/components/MDX/MDXComponents.tsx

@@ -16,6 +16,7 @@ import {
  H3,
  Strong,
 } from '@maximeheckel/design-system';
+import BeforeAfterImage from '@core/components/BeforeAfterImage';
 import Callout from '@core/components/Callout';
 import Code from '@core/components/Code';
 import Fullbleed from '@core/components/Fullbleed';
@@ -185,6 +186,10 @@ const RaymarchingVisualizer = dynamic(
  () => import('./Widgets/Raymarching/RaymarchingVisualizer')
 );
 
+const VolumetricRaymarchingVisualizer = dynamic(
+ () => import('./Widgets/Raymarching/VolumetricRaymarchingVisualizer')
+);
+
 const RefractionDispersionSandpack = dynamic(
  () => import('./Widgets/RefractionDispersionReactThreeFiber/Sandpack')
 );
@@ -257,6 +262,8 @@ const customComponents = {
  DemoSearch,
  DemoButton,
  RaymarchingVisualizer,
+ VolumetricRaymarchingVisualizer,
+ BeforeAfterImage,
  // Sandpacks
  CSSCompositionSandpack,
  ScrollSpySandpack,

core/components/MDX/Widgets/Raymarching/RaymarchingVisualizer/RaymarchingVisualizer.tsx

@@ -66,7 +66,8 @@ const fakeSphereSDF = (_x: number, _y: number, step: number) => {
 
 const SIZE = 17;
 const MAX_STEP = 13;
-const FragmentShaderVisualizer = () => {
+
+const RaymarchingVisualizer = () => {
  const [step, setStep] = useState(0);
 
  const emptyMatrix = useMemo(
@@ -811,4 +812,4 @@ const Diagram = (props: { step: number }) => {
  );
 };
 
-export default FragmentShaderVisualizer;
+export default RaymarchingVisualizer;

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

@@ -12,6 +12,15 @@ import InfinitySpheres from './infinitySpheres';
 import MengerFractal from './mengerFractal';
 import NoiseDerivatives from './noiseDerivatives';
 import MartianLandscape from './martianLandscape';
+import VolumetricRaymarching from './volumetric';
+import VolumetricRaymarchingWithFBM from './volumetricNoise';
+import DirectionalDerivative from './directionalDerivative';
+import MorphingCloud from './morphingCloud';
+import BlueNoiseDithering from './bluenoiseDithering';
+import BicubicFiltering from './bicubicFiltering';
+import BeersLaw from './beersLaw';
+import LightTransmittance from './lightTransmittance';
+import Phase from './phase';
 
 const CSSCode = `
 html {
@@ -46,6 +55,15 @@ const RenderTargetsSandpack = (props: any) => {
  scene8: MengerFractal,
  scene9: NoiseDerivatives,
  scene10: MartianLandscape,
+ scene11: VolumetricRaymarching,
+ scene12: VolumetricRaymarchingWithFBM,
+ scene13: DirectionalDerivative,
+ scene14: MorphingCloud,
+ scene15: BlueNoiseDithering,
+ scene16: BicubicFiltering,
+ scene17: BeersLaw,
+ scene18: LightTransmittance,
+ scene19: Phase,
  };
 
  return (

core/components/MDX/Widgets/Raymarching/VolumetricRaymarchingVisualizer/index.tsx

@@ -0,0 +1 @@
+export { default } from './VolumetricRaymarchibgVisualizer';