DEV Community: worapon jintajirakul

Immersive Web: A Blend of Logic, Motion, and Emotion

worapon jintajirakul — Mon, 01 Dec 2025 12:39:21 +0000

Building Web That Feels — Not Just Functions

ImmersiveWeb

WebDesign

GSAP

ThreeJS

🔗🔗 https://tech-futuristic-landing.vercel.app/

# From Musician to Immersive Web Developer: My First Steps with Three.js and GSAP 🎸➡💻

worapon jintajirakul — Thu, 28 Aug 2025 08:58:45 +0000

I may not be the most skilled developer.

In fact, I still consider myself new in this field.

For years, I’ve been living as a musician playing late-night gigs and also working as an investment strategist.

But recently, I discovered another world that captured me deeply: Immersive Web Development. 🌌

Why Immersive Web?

When I first started coding, I only built simple websites with small motion effects.

It was fun, but something was missing — I wanted to create experiences that feel alive, almost like music.

Then I discovered tools like Three.js and GSAP.

Learning them felt like discovering a new instrument. Suddenly, I could combine logic + art + storytelling in one medium: the web.

A Detour I Couldn’t Ignore

Earlier this year, I lost focus for about 4 months.

Life gave me another responsibility I couldn’t ignore — managing a 7-figure investment portfolio as a financial advisor.

It was a valuable detour, but deep down, I knew my real passion was in building immersive experiences.

My Goal

🎯 Within 1 year, I want to make Immersive Web my career — something that can truly support my life.

I’ll be sharing my journey along the way:

Projects I build (both small experiments and bigger showcases)
Mistakes and struggles (because it’s never perfect)
Lessons learned (technical + personal growth)

First Steps with Three.js + GSAP

Right now, I’m building my Gen2 Portfolio with:

Three.js for 3D scenes
GSAP for smooth motion and interaction
Next.js for structure

I’ll write separate posts diving into specific effects (camera animations, particle systems, hologram backgrounds, etc.) so if you’re into Immersive / Creative Web, feel free to follow along 🚀

Closing Thoughts

I started as a musician. Now, I’m trying to create music with code — not sound, but visuals and experiences.

If you’re also exploring Immersive Web, or if you’ve walked this path before, I’d love to connect and learn from your journey too. 🙏

🚀 My First Three.js Project – Code404

worapon jintajirakul — Thu, 24 Jul 2025 07:16:26 +0000

👉 Live Demo https://code404-five.vercel.app/

After diving deep into UX/UI, motion design, and frontend animation for a while,
I finally took the leap into the 3D world with Three.js.

This is my very first attempt to blend everything I love — interaction, storytelling, and aesthetics —
into a single immersive experience.

🎯 What’s inside?
Built with React Three Fiber

Animation powered by GSAP

Interactive transitions, camera motion, and shaders (in progress!)

Styled to reflect my personality as a designer/dev

🧪 Still a work in progress...
Currently refining:

Camera motion

Lighting

Interactive behaviors

If you're exploring the 3D web, I'd love to hear your thoughts or suggestions.
This is just the beginning — but I’m already loving how much creative freedom Three.js brings.

Let’s make the web more alive. 💫

🧵 Follow me for more posts on creative frontend, motion design, and web3D experiments.

threejs #webgl #frontend #reactthreefiber #gsap #motiondesign #creativecoding #portfolio

🌐 Web3: A New Ideal, or Digital Communism in Disguise?

worapon jintajirakul — Mon, 23 Jun 2025 11:34:01 +0000

📜 The Evolution of the Internet

Web1 – “Read-only”
News sites, personal blogs
You’re just a reader

Web2 – “Read + Write”
Social media, YouTube
You can create content—but corporations truly own it

Web3 – “Read + Write + Own”
Crypto, NFTs, DAOs
You become a co-owner (in theory)

Web3 enters with bold ideals:
“Everyone should own their data, their assets, their identity.”
No more reliance on Facebook, Google, or traditional banks.

It sounds utopian—
A world of true equality, free from centralized control.

But in reality...
Web3 is shaping into a new hierarchy with a different name:

Those who understood it early got the tokens first

Those who hold more get more votes

DAOs meant to be democratic often end up ruled by core devs and whales

The average user? Still locked out, technically and economically

It starts to resemble the same paradox as communism:
“On paper,” everyone is equal
“In practice,” a new elite class takes control

Because deep down,
Most people don’t actually crave equality—
They crave status, advantage, and power over others

📌 Web3 may not be the inevitable future.
But it is a profound question we must now ask:

Do we truly want freedom—
or just a new kind of ruler?

Web3 #Decentralization #DAO #DigitalPower #UXPhilosophy #FutureOfTheInternet #ThinkDeeper

Why I Switched from Framer Motion to GSAP

worapon jintajirakul — Sat, 21 Jun 2025 08:59:07 +0000

🚀 Why I Switched from Framer Motion to GSAP
A real-world breakdown from a frontend dev who builds with motion-first UX

🧠 Context
When I started out with frontend animation in React, Framer Motion felt like magic.
Simple initial / animate / exit props made it super fast to animate modals, buttons, lists — anything UI-based.

But once I began working on more motion-driven projects like:

🧬 DOM + Canvas hybrid UI

🎯 Interactive landing pages

🪐 Scroll-based 3D storytelling (with Three.js)

…I started hitting walls. Syncing animations. Handling scroll. Cross-platform support. That's when I discovered GSAP.

✅ What GSAP Does Better (And Why I Use It Now)

🎬 Real Timeline Control With gsap.timeline(), you get frame-accurate sequencing. Overlaps, delays, sync — all with fine-tuned control.

Framer has no true timeline system. Syncing multiple variants across components gets messy fast.

🧩 Animate Anything CSS, SVG, canvas, scrollTop, clip-path, even JS objects — GSAP handles it.

Framer is limited to props like x, opacity, scale, etc.

🌍 Platform-Agnostic GSAP works with DOM, SVG, WebGL, Three.js, and plain JS.

Framer Motion = React only.

📐 Unit Flexibility px, %, vw, em, --css-vars — GSAP understands them all, no need for manual conversion.

Framer often requires workarounds or state calculations for dynamic units.

🌀 ScrollTrigger (Built-In) Scrub animations

Pin sections

Media-query-based motion

Timeline-on-scroll

Framer needs third-party observers and tons of glue code.

🚀 Performance GSAP is written in vanilla JS and optimized with direct requestAnimationFrame. No re-rendering issues.

Framer can drop frames when animating multiple elements due to React lifecycle overhead.
💡 Final Thoughts
Framer Motion is great for building UI animation.
But GSAP is a tool for building motion-powered UX — the kind where animation isn't just an effect, it's part of the experience.

Framer = Animator
GSAP = Motion Director 🎬

🙌 Over to you:
Have you tried both? What’s your go-to setup for motion-heavy projects?

Let’s share knowledge — comment below!

gsap #framermotion #webdev #frontend #animation #creativecoding #threejs #ux

Solora — A Quiet Place to Come Home to Yourself

worapon jintajirakul — Mon, 16 Jun 2025 09:47:42 +0000

“I’m not building another app that keeps people staring at their screens longer.
I’m building one that helps them quietly talk to themselves again.”
— Founder’s Note

I didn’t expect this kind of feedback — but it meant a lot

worapon jintajirakul — Wed, 11 Jun 2025 12:22:51 +0000

Feedback I didn’t expect

A few days after I shared TaskSync, I received a thoughtful comment from Reji Modiyil,

founder of Hostao and a long-time voice in the productivity space.

“It’s vital for technology to support our minds, rather than overwhelm them.”

That single line captured exactly what TaskSync was built to explore —

a calmer, kinder approach to digital productivity.

I didn’t need another productivity app — I just needed something that felt lighter.

worapon jintajirakul — Sun, 08 Jun 2025 10:37:14 +0000

The Problem

I’ve tried all the popular task management tools:

Notion, ClickUp, Asana, Trello, Todoist — you name it.

And I kept running into the same feeling:

The more I used them, the more overwhelmed I became.

Instead of clarity, I got complexity.

Instead of peace of mind, I got guilt.

All I wanted was to see what I needed to do today.

But I had to dig through workspaces → sections → subtasks → filters.

It felt like I had to pass a UX test… just to start my day.

That frustration turned into a question:

What if planning didn’t feel heavy?

What if organizing your day felt like laying something down — not picking up more?

That’s the moment TaskSync was born.

The Concept

TaskSync is not about productivity.

It’s about emotional clarity.

I designed it to remove friction, not add structure.

To feel human, not industrial.

Instead of pushing you to “do more,”

It helps you move forward — without judgment.

What I’m building into TaskSync:

✅ Smooth drag & drop (GSAP + React)
🧘 A personal assistant mode that helps you sort, not decide for you
📊 An emotional review after each task (How did it feel?)
🧹 A simple trash/edit zone to reduce hesitation
📆 Weekly review based on emotional energy, not just completed tasks

Why this matters (to me, and maybe to you):

So many apps focus on performance.

I wanted to focus on permission — the kind we rarely give ourselves.

Permission to slow down.

To do less, if less is what you need today.

To see your tasks as part of your life, not your worth.

See TaskSync (and other projects)

I’m still building, learning, iterating.

But if any part of this resonates with you, I’d love for you to check it out:

🔗 https://worapon.dev

Thanks for reading 🙏

Let’s build calm tools that help humans feel a little more like themselves.

uxdesign #gsap #react #buildinpublic #calmtech

"I Built My Developer Portfolio Without Templates – and Then Three.js Liked It"

worapon jintajirakul — Fri, 06 Jun 2025 09:24:01 +0000

After months of building my portfolio from scratch – no templates, no UI kits, no shortcuts – something unexpected happened:

The official Three.js team liked my post. 🤯

🚀 The Project

This is not just another spinning cube.

I designed everything from the ground up – motion, shaders, camera transitions, UX, and even micro-interactions.

The goal wasn’t to impress with visuals alone, but to create a feeling — a sci-fi-inspired immersive UI that reflects my personality and thinking process as a developer.

🔗 Try it here → https://worapon.dev

🛠️ Tools & Stack

Three.js (via React Three Fiber)
GSAP for buttery-smooth animations
Custom shaders written with raw GLSL
No pre-built UI kit — everything styled manually
Next.js + Tailwind + love

🎯 Why I Did This

I didn’t build this site to look flashy.

I wanted to show what a solo developer can do when they care about experience, not just functionality.

I believe:

✨ Every transition can tell a story

✨ Every line of code can reflect who you are

👁️ Behind the Scenes (Coming Soon)

I’ll be posting more details soon — including how I structured the motion flow, camera logic, and shader transitions.

If you're building something similar or love working with motion/creative web, feel free to connect or share your thoughts.

Let’s push the web forward — one immersive pixel at a time 🚀

Building an Immersive Motion-First Portfolio with GSAP, Three.js, and Next.js

worapon jintajirakul — Wed, 04 Jun 2025 12:10:46 +0000

After nearly 2 years of learning frontend development and crafting UI/UX by hand, I just launched my personal portfolio:

👉 https://www.worapon.dev

This isn’t a template. Every layout, motion, and pixel is intentional.

🔧 Tech Stack

Next.js 15 for structure, performance, and routing
GSAP for buttery-smooth motion-first animation
Three.js + R3F for 3D shaders and depth
Tailwind CSS for scalable design system
Fully responsive, no CMS, no templates — coded line-by-line

🎯 Design Philosophy

I don't just make websites.

I design experiences that feel smooth, intentional, and immersive.

I approach frontend the same way I approach music (which I used to play professionally):

Focus on timing, transitions, and emotional tone.

📬 Currently Open for 1 Project

I’m opening up to freelance work.

If you're a founder, agency, or creator who needs a developer that:

Understands real UX
Writes production-ready motion
Doesn’t rely on themes or drag-and-drop tools

Let’s connect.

💬 Feedback Welcome

Would love to hear your thoughts on the portfolio —

UX, performance, structure, or motion polish — feel free to drop any feedback or questions.

👉 https://www.worapon.dev

Thanks for reading!

frontend #gsap #nextjs #threejs #r3f #webdev #portfolio #animation #uxui

TaskSync – When Task Management Meets Emotional Awareness

worapon jintajirakul — Fri, 23 May 2025 11:00:12 +0000

🧠 TaskSync – When Task Management Meets Emotional Awareness

I used to feel that most to-do apps are... robotic.
They help you plan, but they don’t reflect how you feel or how your energy flows.

So I built TaskSync — a personal task manager that not only tracks your tasks,
but helps you understand your emotional momentum throughout the week.

🌗 It connects your actions → to energy → to reflection.
📊 Each task contributes to a live Emotional Meter (moderate? burnout? high flow?)
🌀 It’s designed to feel intuitive – no manual needed.
🧩 Inspired by Apple-level simplicity, and will soon integrate with my next app: Sorola (a deeper life-path planning system).

🔧 Tech stack:

Next.js 15

Tailwind CSS 4

GSAP Motion

Prisma + PostgreSQL

Cloudinary

NextAuth (Google login)

Context API + Custom Hooks

👉 Try the live version here: https://tasksync-chi.vercel.app/
🛠️ GitHub: https://github.com/worapon888/tasksync

I’m building this as a solo dev to push UX, productivity, and emotion-aware tools forward.
Would love feedback or collabs from anyone building in the human-centered tech space.

TaskSync #ProductivityTools #UXDesign #NextJS #MentalClarity #EmotionalIntelligence #SoloDev

🧵 [Project Showcase] MinimalMart – Motion-first E-Commerce UI with GSAP + Next.js 15

worapon jintajirakul — Thu, 24 Apr 2025 05:50:21 +0000

🧵 [Project Showcase] MinimalMart – Motion-first E-Commerce UI with GSAP + Next.js 15
MinimalMart is a solo-built e-commerce frontend concept, designed to explore what a motion-first, user-centric shopping experience could look like in 2025.

⚙️ Tech Stack
Next.js 15 (App Router) – for modern routing and file-based structure

Tailwind CSS 4.0 – with custom breakpoints and container logic

GSAP – powering smooth motion, soft-shake effects, and animated cart interactions

TypeScript – with modular state and strict types

🧠 Key Features
🛒 Animated Add-to-Cart with floating cart preview

🎯 Real-time filter/search with URL params + local state

📱 Responsive layout with layout-specific overrides

🌐 SEO-ready: metadata, OG image, alt tags, sitemap.xml

🎯 Design Philosophy
MinimalMart is not just about “a clean UI.”
It's about building an interface that feels alive — through soft, thoughtful motion that doesn’t get in the user’s way, but helps them engage with the product and flow naturally through each interaction.

📦 Live Demo
🔗 https://minimart-three.vercel.app

🙋‍♂️ Looking For:
Feedback on motion flow & UX design

Devs who are into design systems + animation + solo craft

Conversations around how motion can shape perceived quality

If you're curious to see more or want to dig into the structure, DM me — I'm always happy to connect with other motion-nerds and frontend lovers 😄

nextjs #tailwindcss #gsap #webdev #frontend #showcase