React card-game animator - deal, fly-in, flip, and chip motion (Next.js)

Posted 3 days ago

Worldwide

Summary

We need a frontend animation specialist for our platform, a live online card table (Next.js, React, TypeScript, styled-components). Cards already render, flip, and pop in. Motion is too basic: a short CSS scale-up on deal and a simple 3D `rotateY` flip. There is also an unfinished Framer Motion “fly from deck to seat” prototype and a chip-fly animation for bets. We want the table to feel like a real casino: cards dealt one-by-one from the deck to each seat, a clean land, a reliable flip, and tighter chip motion - all synced to live game events. What to build - Deal: cards fly from the center deck to each player slot, staggered in deal order, with a slight arc/rotation and a settle. Own hand and opponent stacks can differ slightly. - Flip: polish face-down ↔ face-up so reveal / show-cards / Ace-hunt never flicker or double-flip. - Chips: improve chips flying from player to pot (and win collection if time allows) without hurting performance. - Live sync: dealing is driven by SignalR `GiveCard` and existing game state (`applyGiveCard`). Do not invent extra cards. Mid-deal join or refresh should skip or catch up, not replay the whole deal. - Performance: 6–8 seats, up to 3 cards each, plus chips. Smooth on mid-range phones. No leftover transforms after a card lands. Work inside our current `Card`, `CardStack`, `SwipableCardStack`, `FlyingChips`, and table layout. Framer Motion is already in a `Card/v2` prototype — finish that or replace it with CSS/GSAP if that is cleaner. Do not rewrite the game. We will provide repo access, a staging table, and clips of current vs desired feel. Must have - Portfolio of card / casino / board-game motion (deal, shuffle, chips, or similar fly-to-slot). Video or live URL required. - Strong CSS transforms / 3D / measure-then-animate. - Comfortable in existing React + TypeScript — not a greenfield demo. - English good enough to discuss timing and edge cases. To apply, include 1. 2–3 links to card/chip/game animations you built 2. CSS vs Framer vs GSAP for this job, and why 3. Estimated hours for deal + flip + chips 4. Hourly rate and hours you can give this week Generic “I can do CSS animations” pitches will be declined. We only shortlist people who show real table motion work.

  • $600.00

    Fixed-price
  • Expert
    Experience Level
  • Remote Job
  • Ongoing project
    Project Type

Contract-to-hire opportunity

This lets talent know that this job could become full time.
Learn more
Skills and Expertise
Mandatory skills
React
Next.js
HTML5
css animation
Activity on this job
  • Proposals:15 to 20
  • Last viewed by client:yesterday
  • Interviewing:
    12
  • Invites sent:
    9
  • Unanswered invites:
    1
About the client
Member since Aug 3, 2026
  • Azerbaijan
    10:37 PM

Explore similar jobs on Upwork

Build End to End Application (ON SITE)Hourly‐ Posted 3 weeks ago
TypeScript
React
Ecommerce Website
Web Application
Website
Front-End Development
Convert HTML Website to WordPress with ElementorFixed-price‐ Posted 2 weeks ago
HTML
HTML5
WordPress
CSS

How it works

  • Post a job icon
    Create your free profile
    Highlight your skills and experience, show your portfolio, and set your ideal pay rate.
  • Talent comes to you icon
    Work the way you want
    Apply for jobs, create easy-to-by projects, or access exclusive opportunities that come to you.
  • Payment simplified icon
    Get paid securely
    From contract to payment, we help you work safely and get paid securely.
Want to get started? Create a profile

About Upwork

  • Rating is 4.9 out of 5.
    4.9/5
    (Average rating of clients by professionals)
  • G2 2021
    #1 freelance platform
  • 49,000+
    Signed contract every week
  • $2.3B
    Freelancers earned on Upwork in 2020

Find the best freelance jobs

Growing your career is as easy as creating a free profile and finding work like this that fits your skills.

Trusted by

  • Microsoft Logo
  • Airbnb Logo
  • Bissell Logo
  • GoDaddy Logo