# Playable 2D Pixel-Art Resume Built with Three.js, R3F and Rapier

**URL:** <https://discourse.threejs.org/t/playable-2d-pixel-art-resume-built-with-three-js-r3f-and-rapier/91263>\
**Category:** Showcase\
**Tags:** drei, react, rapier, postprocessing, threejs, react-three-fiber\
**Created:** [April 28, 2026, 7:03pm UTC](https://discourse.threejs.org/t/playable-2d-pixel-art-resume-built-with-three-js-r3f-and-rapier/91263 "2026-04-28T19:03:44Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![SrPumpkin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/srpumpkin/32/68467_2.png) [@SrPumpkin](https://discourse.threejs.org/u/SrPumpkin)\
**Post date:** [April 28, 2026, 7:03pm UTC](https://discourse.threejs.org/t/playable-2d-pixel-art-resume-built-with-three-js-r3f-and-rapier/91263/1 "2026-04-28T19:03:44Z")

</div>

![preview](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/9/1973314477b01c021082e97b16f872e840474ac5.gif)

Hi everyone,

I’m sharing a playable resume implemented as a 2D pixel-art platformer using Three.js, React Three Fiber, and Rapier.

The project uses Three.js/R3F for real-time rendering and scene composition, with Rapier handling physics-based movement and object interactions. The user controls a character, moves through the scene, jumps, interacts with objects, and collects coins during exploration.

The character controller includes platformer-specific input behavior: variable jump height based on button hold duration and coyote time for late jump input shortly after losing ground contact. Post-processing is used for glow effects on selected scene elements.

Coins track exploration progress and act as a completion indicator for the full site.

Live site:

> **[SrPumpkin — Senior Frontend Engineer | Playable Resume](https://pumpkin-world.org)**
>
> Interactive platformer resume of SrPumpkin, a Senior Frontend Engineer with 9+ years of experience in frontend architecture, performance, and scalable web products built with React, Next.js, and TypeScript.

I’d be interested in feedback on the control feel, physics behavior, performance, post-processing, visual presentation, and the use of Three.js/R3F for a 2D pixel-art playable resume.

---

<div class="post-metadata">

**Author:** ![Aditya\_Mandal](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aditya_mandal/32/61599_2.png) [@Aditya\_Mandal](https://discourse.threejs.org/u/Aditya_Mandal)\
**Post date:** [April 29, 2026, 11:46am UTC](https://discourse.threejs.org/t/playable-2d-pixel-art-resume-built-with-three-js-r3f-and-rapier/91263/2 "2026-04-29T11:46:15Z")

</div>

This is seriously impressive work. As a pixel art lover, I can really appreciate the amount of effort you’ve put into creating all these assets—it shows. Everything feels polished and thoughtfully built. Where are the pixel art lovers at? You’ve got to check this out 🔥

---

<div class="post-metadata">

**Author:** ![ExSoul](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/exsoul/32/46220_2.png) [@ExSoul](https://discourse.threejs.org/u/ExSoul)\
**Post date:** [May 5, 2026, 7:03am UTC](https://discourse.threejs.org/t/playable-2d-pixel-art-resume-built-with-three-js-r3f-and-rapier/91263/3 "2026-05-05T07:03:35Z")

</div>

I also loved it. Amount of details in pixel art is incredible. But… out of curiosity i went too far right and poor pumpkin man fell under the level ☹ An invisible wall here and there and it would be perfect

---

<div class="post-metadata">

**Author:** ![SrPumpkin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/srpumpkin/32/68467_2.png) [@SrPumpkin](https://discourse.threejs.org/u/SrPumpkin)\
**Post date:** [May 5, 2026, 7:56pm UTC](https://discourse.threejs.org/t/playable-2d-pixel-art-resume-built-with-three-js-r3f-and-rapier/91263/4 "2026-05-05T19:56:27Z")

</div>

> [@ExSoul](#):
>
> I also loved it. Amount of details in pixel art is incredible. But… out of curiosity i went too far right and poor pumpkin man fell under the level ☹ An invisible wall here and there and it would be perfect

Thanks a lot ❤. After rewriting the controller, I forgot to update the invisible walls. It’s fixed now. I’m also planning to update the menu visuals and add a door-opening animation for the first POI (Point of Interest).

---

<div class="post-metadata">

**Author:** ![blaeberry](https://avatars.discourse-cdn.com/v4/letter/b/7c8e57/32.png) [@blaeberry](https://discourse.threejs.org/u/blaeberry)\
**Post date:** [May 9, 2026, 12:48am UTC](https://discourse.threejs.org/t/playable-2d-pixel-art-resume-built-with-three-js-r3f-and-rapier/91263/5 "2026-05-09T00:48:07Z")

</div>

This is awesome! What was your process for making the assets? As a frontend developer myself with no talent for art, I’m curious if you used tools to help or if you are a talented artist unlike myself.

---

<div class="post-metadata">

**Author:** ![SrPumpkin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/srpumpkin/32/68467_2.png) [@SrPumpkin](https://discourse.threejs.org/u/SrPumpkin)\
**Post date:** [May 10, 2026, 10:42am UTC](https://discourse.threejs.org/t/playable-2d-pixel-art-resume-built-with-three-js-r3f-and-rapier/91263/6 "2026-05-10T10:42:18Z")

</div>

> [@blaeberry](#):
>
> What was your process for making the assets?

Thank you! I’m not an artist myself, so I commissioned all the sprites from a pixel artist. I handled the game side, but the actual pixel art was made by someone much more talented in that area.

---

<div class="post-metadata">

**Author:** ![asdrubal](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/asdrubal/32/42795_2.png) [@asdrubal](https://discourse.threejs.org/u/asdrubal)\
**Post date:** [July 4, 2026, 3:01pm UTC](https://discourse.threejs.org/t/playable-2d-pixel-art-resume-built-with-three-js-r3f-and-rapier/91263/7 "2026-07-04T15:01:08Z")

</div>

blinking. Missing some frame

---

<div class="post-metadata">

**Author:** ![SrPumpkin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/srpumpkin/32/68467_2.png) [@SrPumpkin](https://discourse.threejs.org/u/SrPumpkin)\
**Post date:** [July 6, 2026, 3:54pm UTC](https://discourse.threejs.org/t/playable-2d-pixel-art-resume-built-with-three-js-r3f-and-rapier/91263/8 "2026-07-06T15:54:46Z")

</div>

That’s strange, this shouldn’t be happening. Thank you for reporting the issue.

Could you please share the conditions under which you’re opening the website: which browser and version, which operating system, and the approximate screen size or device? It would also be helpful to know if anything appears in the developer console - errors, warnings, or failed requests.

---

<div class="post-metadata">

**Author:** ![asdrubal](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/asdrubal/32/42795_2.png) [@asdrubal](https://discourse.threejs.org/u/asdrubal)\
**Post date:** [July 8, 2026, 9:59am UTC](https://discourse.threejs.org/t/playable-2d-pixel-art-resume-built-with-three-js-r3f-and-rapier/91263/9 "2026-07-08T09:59:43Z")

</div>

using brave browser. no changes, all status are 200

---

<div class="post-metadata">

**Author:** ![SrPumpkin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/srpumpkin/32/68467_2.png) [@SrPumpkin](https://discourse.threejs.org/u/SrPumpkin)\
**Post date:** [July 8, 2026, 1:34pm UTC](https://discourse.threejs.org/t/playable-2d-pixel-art-resume-built-with-three-js-r3f-and-rapier/91263/10 "2026-07-08T13:34:49Z")

</div>

I checked how it works in Brave on different devices and settings. Unfortunately, I couldn’t reproduce the bug. It’s possible that the problem is related to specific hardware, the operating system version, or some particular conditions.

---

<div class="post-metadata">

**Author:** ![asdrubal](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/asdrubal/32/42795_2.png) [@asdrubal](https://discourse.threejs.org/u/asdrubal)\
**Post date:** [July 9, 2026, 12:05pm UTC](https://discourse.threejs.org/t/playable-2d-pixel-art-resume-built-with-three-js-r3f-and-rapier/91263/11 "2026-07-09T12:05:27Z")

</div>

Very weird