This section is a live reference for the markdown features supported in the blog page. Standard markdown images and the custom image blocks below render immediately on load.

Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

Text Formatting

You can use bold, italic, bold italic, inline code, and links.

Lists

• Bullet list item
• Another bullet list item
• A final bullet list item

1. Ordered list item
2. Second ordered list item
3. Third ordered list item

• Finished task
• Pending task

Quote

Strong presentation is not polish at the end. It is part of the design system from the first frame.

Divider

---

Table

Stage	Goal	Tooling
Discovery	Define beats and mood	Figma, PureRef
Production	Build final assets	Blender, Photoshop
Integration	Ship into engine or web	Unity, React, Three.js

Standard Markdown Image

Use regular markdown image syntax when you just need one image. The image will still get the reveal-on-scroll treatment.

Usage

![Neon-lit environment concept](https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&w=1400&q=80 "Concept environment")

Live Result

Fenced Code Blocks

Use fenced code blocks with a language for syntax highlighting.

Usage

```tsx
import { useScroll } from "framer-motion";

const BlogMotion = () => {
    const { scrollYProgress } = useScroll();
    return <div data-progress={scrollYProgress.get()} />;
};
```

Live Result

import { useScroll } from "framer-motion";

const BlogMotion = () => {
    const { scrollYProgress } = useScroll();
    return <div data-progress={scrollYProgress.get()} />;
};

Custom Syntax: ::reveal

Use ::reveal for a large featured image with optional caption and aspect ratio.

Supported attributes

• src
• alt
• caption
• aspect

Usage

::reveal[
  src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&w=1400&q=80"
  alt="Cinematic concept art"
  caption="Mood frame / atmosphere study"
  aspect="16/9"
]

Live Result

Custom Syntax: ::compare

Use ::compare to create a draggable before/after wipe comparison. This is intended for art passes, UI before/after, lighting comparisons, and polish breakdowns.

Supported attributes

• before or src1
• after or src2
• beforeLabel
• afterLabel
• aspect

Usage

::compare[
  before="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&w=1400&q=80"
  after="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=1400&q=80"
  beforeLabel="Blockout"
  afterLabel="Final Render"
  aspect="16/9"
]

Live Result

Blockout

Final Render

Custom Syntax: ::grid

Use ::grid to place multiple images into a responsive gallery. Each tile reveals on scroll with a staggered entrance.

Supported attributes

• src1, src2, src3, src4
• alt1, alt2, alt3, alt4
• caption1, caption2, caption3, caption4
• columns
• aspect

Usage

::grid[
  src1="https://images.unsplash.com/photo-1614729939124-032f0b56c9ce?auto=format&fit=crop&w=1000&q=80"
  alt1="Cel-shaded environment test"
  caption1="Environment"
  src2="https://images.unsplash.com/photo-1614730321146-b6fa6a46bcb4?auto=format&fit=crop&w=1000&q=80"
  alt2="Effects and color pass"
  caption2="FX pass"
  src3="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&w=1000&q=80"
  alt3="Final cinematic scene"
  caption3="Final frame"
  columns="3"
  aspect="4/3"
]

Live Result

Notes

• Wrap all custom block attributes in double quotes.
• Keep each custom block on one line in production posts.
• src1 and src2 still work for backward compatibility, but before and after are clearer for compare blocks.