最近我做了个挺有意思的小实验。 我把一个二次元角色的小动画效果，分别用： WebGL Canvas 2D 纯 DOM + CSS 实现了三遍。 效果本身不复杂： 眨眼 眉毛/下眼皮联动 流汗轻微飘动 呆毛甩动 但真正有意思的，其实不是“做出来”。 而是： 同一个东西，用三种技术栈实现时，到底会差多少？ 本质上就是一次“前端图形学味很浓”的复刻实验。 一开始只是想复刻一个呆毛动画 灵感来源：https://tamanidamani.itch.io/nijikas-ahoge 我当时想法特别简单：“如果是我,要怎么实现？” 然后越做越上头。最后直接演变成： 那我干脆把 WebGL、Canvas2D、DOM 三种方案都做一遍算了。 于是仓库就变成了现在这样： canvas/ canvas2D/ dom/ 三个版本同效果实现。 先说结论 如果只让我说一句话： WebGL 最强，但 Canvas2D 最舒服，DOM 最适合业务 1. WebGL 版本：最像“真正游戏开发” 这个版本是最折腾的。 因为它本质上已经不是“前端动画”了, 而是：GPU 图形编程 它到底怎么实现的？ 核心思路其实就是： 底图一层 精灵图一层层贴 shader 控制绘制 JS 驱动动画参数 比如： 呆毛旋转 眨眼裁剪 alpha 混合 这些其实都在 GPU 那边做。 你会开始接触： uniform texture shader UV 顶点坐标 纹理坐标 然后人会逐渐失去笑容。 但 WebGL 真强 当元素一多的时候, WebGL 那种： “完全不慌” 的感觉特别明显。 尤其是： ...
Kill the person who writes code by hand
Lately, while I’m coding, I have a strange feeling. Not that I can’t code or don’t want to. But— It feels like I’m becoming less and less necessary. Previously, for a feature from requirement to launch, the path was basically this: I understand the requirement → design the solution → write code → debug → fix bugs → launch What does it look like now? I describe the requirement → AI writes the code → AI fixes the bugs → I glance at it → launch ...
履行一场二十年的约定
This story sounds like something out of a TV drama, but it actually happened to me. I’m someone who’s very sentimental. Due to family reasons, I left that place at an early age. The concept of “growing up together (childhood friends)” has always been vague to me—and because of this, I’ve always envied those who could grow up side by side with deep affection. After growing up, I always felt like I was constantly drifting. Habitually leaving early, abandoning my friends behind. ...
🌸 April, cherry blossoms, and a lie that never stops
April is a month that begins with cherry blossoms. It also began with the anime titled April Is Your Lie. Some moments are defined by the works that surround them. Like now, whenever April arrives, it’s hard not to recall that line: “April is your lie.” One day, you suddenly look up and notice a tree you’ve never paid attention to before, already quietly blooming in pink. 📷 A Backdrop Straight Out of an Anime That day, I just saw two people ahead— ...
Nightingale Cottage Visit Record
Last weekend, I visited a small shop with a 2D-style vibe—Yakumo House. Actually, I’d seen this place before while scrolling online. It was described as an interesting little hideout tucked inside a park, and anyone who loves 2D culture or Touhou Project would probably feel right at home. Since I had some free time on the weekend, I decided to check it out. The first thing that hit me when I walked in was: This place is even more “high-concentration” than I imagined. ...
🎉 First mirrorless camera for young people
🎉 New Achievement Accomplished I recently upgraded my photography gear, swapping out my Canon 60D, which I’d been using for a while, for a Canon R50. One is a classic mid-range DSLR from 2010, the other an entry-level mirrorless camera from 2023. These two cameras span over a decade of technological evolution, and I wanted to experience what modern mirrorless cameras are really like. 1. My First DSLR: Canon 60D The Canon 60D was once the “dream camera” for many photography enthusiasts. ...
《ATRI -My Dear Moments》
Although I watched ATRI -My Dear Moments- about half a year ago, recently, ATRI memes suddenly started popping up in my social circles, pulling me back into those thoughts. Thanks to my recommendation, @Kuju-san also watched and played the game. I thought it would be a lighthearted, cute robot × daily life healing anime, but as I kept watching: Huh? Why do I suddenly feel a little choked up? ...
Web3 On-chain Red Packet DApp
This is a 100% decentralized blockchain red packet application. Users can connect their wallets, set an amount and quantity to send red packets, and then share a link for others to claim. All data and operations are based on the blockchain, completely eliminating the need for centralized servers, making the entire process secure, transparent, and traceable. If you’re interested, you can check out my code on GitHub: redpacket‑dapp Feature Highlights 🧧 Send Red Packet: Connect your wallet, set the amount and quantity, and send a red packet to the blockchain. 🎁 Claim Red Packet: Through a shared link, others can connect their wallets and claim the red packet directly from the blockchain. 🔗 Smart Contract: Secure smart contracts written in Solidity handle all logic. 🌐 Multi-chain Support: Supports local testnet and BSC testnet. 💼 Web3 Integration: Uses MetaMask wallet connection. 🚀 Fully Decentralized: No backend server, all data stored on the blockchain. Tech Stack Frontend: React 19, React Router 6, TypeScript, Vite, Ethers v6 Contract Layer: Hardhat, Solidity 0.8.x Tools: ESLint, Prettier No Backend Required: Zero server dependencies ❌ Quick Start # 1. Install project dependencies npm install cd react-dapp && npm install && cd .. # 2. Start local blockchain node npm run node # 3. Compile smart contracts npx hardhat compile # 4. Deploy smart contracts npm run deploy # 5. Start frontend npm run frontend Directory Structure redpacket-web3/ ├─ contracts/ # Solidity smart contracts │ └─ RedPacket.sol ├─ react-dapp/ # React + Vite frontend │ ├─ src/ │ │ ├─ components/ # Common components (wallet button, create form, etc.) │ │ ├─ config/ # ABI, contract address configuration │ │ ├─ hooks/ # Custom hooks (useWallet) │ │ ├─ pages/ # Pages (Home, ClaimPacket) │ │ ├─ styles/ # Global styles │ │ ├─ utils/ # Web3 utility functions │ │ └─ App.tsx # Routing and layout │ ├─ .env.example # Frontend environment variable instructions │ └─ package.json ├─ scripts/ │ └─ deploy.js # Hardhat deployment script (automatically writes to frontend config) ├─ hardhat.config.js └─ package.json # Root scripts (Hardhat + frontend one-click start) Usage Guide Create a Red Packet Open the frontend and click “Connect Wallet” in the top right corner. Fill in the total red packet amount and number of shares; the application will randomly split the amount on the frontend. Submit and confirm the transaction in MetaMask, then wait for block confirmation. Upon success, copy the system-generated claim link and share it with friends. Claim a Red Packet Open the shared link (URL contains /claim/{packetId}). Connect your wallet first, then click “Claim”. After signing and confirming, wait for the block to be mined. The page will display the result and remaining shares. Environment Variables dapp/.env (automatically ignored in development, please refer to .env.example) VITE_RPC_URL: Frontend direct RPC node, defaults to http://127.0.0.1:8545 VITE_CONTRACT_ADDRESS: Can override the address written by the deployment script VITE_CHAIN_ID: Chain ID (hexadecimal) prompted for use by the frontend root/.env: If you need to reference private keys or BSC RPC in Hardhat, you can continue to use the original syntax. Smart Contract (RedPacket.sol) Core methods: ...
What have we been up to in the blog this year?
Before I knew it, 2025 has already passed. Looking back at the blog’s timeline, I realized—I actually wrote quite a lot this year. Although many times I just wrote whatever came to mind, looking back, each post genuinely recorded the state of this year. Consider this a year-end summary for myself, and for those of you who frequently visit the blog. What did the blog cover this year? If I were to summarize the blog content of 2025 with a few keywords, it would probably be: ...
Wolf and Spice
2025-12-16 Evening I just finished watching the 2024 remake of “Spice and Wolf.” I heard the ending wasn’t ideal, and I originally thought it would be equivalent to three seasons’ worth. I was thinking that by the end of the first season, they had already embarked on the journey to find her homeland, and there was another season waiting for me to watch, so the ending couldn’t be too bad, right? But I was wrong. It turns out what I watched was a remake combining seasons 1 and 2. ...