iiinova — where your digital self keeps evolving

Travis Arnold

@souporserious.com

493 followers 29 following 43 posts

design / systems / compilers / react founder www.renoun.dev

Posts Replies Media

Travis Arnold @souporserious.com · 13/09/2026

volumetric clouds in wgsl 🌥️

001

Travis Arnold @souporserious.com · 06/01/2026

Introducing @renoun/screenshot 📸 Capture any HTML element as an image with pixel-perfect accuracy, including modern CSS features.

220

Travis Arnold @souporserious.com · 26/11/2025

Turning 35 today 🎉 so I’m shipping something a little early to celebrate. A premium Next.js + MDX slide deck template for renoun 50% off for a limited time: buy.polar.sh/polar_cl_tLG... - Record your talk in-browser (camera + slides) - Convert to MP4 - Keep everything local

preview of the renoun presentation template

020

Travis Arnold @souporserious.com · 16/10/2025

It's been almost five years since React Server Components were announced and three years since we could practically use them. I could not have built www.renoun.dev without React.

import { Directory } from 'renoun'

const posts = new Directory({
path: 'posts',
filter: '*.mdx',
})

export async function Page({ slug }: { slug: string }) {
const post = await posts.getFile(slug, 'mdx')
const Content = await post.getContent()
return <Content />
}

130

Travis Arnold @souporserious.com · 12/10/2025

Annotations for code blocks usually require writing regexes to target specific source code and don't stay in sync easily. Working on something new using inline JSX comments. Highly flexible, declarative, and exposes annotations as renderers you can do whatever you want with.

The following source text with "warn" highlighted in yellow and "error" highlighted in red: console.warn('Warning') console.error('Error')

import { CodeBlock } from 'renoun'

export function Annotations() {
return (
<CodeBlock
language="ts"
annotations={{
highlight: ({ children, color }) => (
<span
style={{
padding: '0 0.05em',
borderRadius: '0.25rem',
backgroundColor: color,
}}
>
{children}
</span>
),
}}
>
{`
console./* <highlight color='rgba(255,213,0,0.35)'> */warn/* </highlight> */('Warning')
console./* <highlight color='rgba(255,0,0,0.35)' /> */error('Error')
`}
</CodeBlock>
)
}

000