Starter
One site, built & hosted
$30/mo
- Custom design
- HTTPS included
- Phone-friendly
- Email support
Demo button — no checkout
For store owners & small businesses
See what your website can do.
When we build your site, it can move when people use it, and it can show menus, prices, and lists in a way that is easy to read. Try the examples below. They live on this website, so you can click around. The same kinds of features can go on the site we build for you.
$30/month
Nothing on this page signs you in or charges a card.
motion controls for your website
Motion and interaction
Hover, drag, and scroll. These are examples of movement we can put on a site we build for you. On a phone, tap instead of hover. If your device asks for less motion, the busy parts stay still.
01 · React + Motion useSpring
Custom cursor
A dot and a lagging ring follow the pointer, and the ring grows over links and buttons. It stays off on touch screens and when reduced motion is on.
The cursor on this page is a dot plus a springy ring. On a touch screen it stays off, and your normal tapping is kept.
02 · Motion (useSpring)
Magnetic buttons
Buttons lean toward the pointer and spring back when it leaves. A tap presses them in on a phone.
03 · Motion whileHover / variants
Hover effects
Lift with a glow, a card that tilts in 3D, and a panel that reveals a line of text. On a phone, tap the reveal card.
Lift + glow
whileHover y / boxShadow
3D tilt
rotateX / rotateY with perspective
04 · Motion useMotionValue + useTransform
Mouse parallax
Layers shift by different amounts as the pointer moves, so the panel feels deeper than a flat box.
Move your mouse / drag a finger — each layer moves at a different depth
05 · Tailwind + CSS keyframes
Infinite marquee
A doubled row slides by in a loop. Hover pauses it. Reduced motion stops it.
Next.jsReactTailwindMotionGSAPLottieThree.jsR3F
06 · React state + CSS caret
Typewriter text
The line types, pauses, deletes, and cycles. Reduced motion shows the sentence without typing.
> ▌
07 · CSS keyframes + Motion spring
Spin
One mark spins on its own, one springs when you tap it, and one turns when you hover.
hover
CSS keyframe spinner · tap-to-spin with spring overshoot · spin on hover
08 · Motion layoutId + AnimatePresence
Lightbox
Tap a tile and it opens large. Tap the backdrop, the close button, or press Esc to go back.
09 · Motion drag
Draggable elements
Drag or flick the tiles. They stay inside the box and bounce at the edges. Touch works too.
Drag me
Elastic
Throw me
10 · Motion whileInView
Scroll-triggered reveals
These cards ease in as they enter the screen, and settle back if you scroll away.
Fade up
Slide in
Scale
Blur in
11 · GSAP ScrollTrigger
Pinned scroll timeline
This panel stays in place while you scroll. Words, a shape, a counter, and a progress bar move with the scrollbar.
Loading the scroll example
12 · Motion layout + React state
Layout animations
A short wizard with a sliding highlight, and a task list that animates when you filter, add, or remove items. Nothing is saved.
- Design hero
- Add motion
- Ship it
13 · lottie-react (bundled JSON)
Lottie animation
An After Effects-style drawing with play, pause, speed, and direction. The file is part of this site.
Loading the drawn animation
14 · React Three Fiber (Three.js)
Interactive 3D object
Move over the shape to tint it, click to grow it, and move the pointer to twist it. The spin stops when reduced motion is on.
Loading the 3D example
15 · Aceternity / Magic UI style (Tailwind)
Glowing cards & beam background
Move over a card and a soft light follows your pointer. Beams drift behind the cards, and they stop when reduced motion is on.
Spotlight
A soft light follows the pointer across the card.
Border glow
The edge brightens where the pointer is.
Gradient beam
Beams drift behind the row. They pause if you prefer less motion.
ways we can lay out your data
Tables and lists
Menus, prices, teams, questions, and news. Ten layouts shops often want. The names and numbers are samples. Nothing is saved, and the price buttons do not take payment.
01 · CSS sticky + Tailwind
Sticky header · zebra · hover
Scroll inside the box: the header stays put. Alternating row tints and a teal hover highlight keep a long list readable.
| Order | Customer | Plan | Amount | Status | Date |
|---|---|---|---|---|---|
| ORD-1042 | River City Bakery | Starter | $30 | Paid | Oct 28 |
| ORD-1043 | Oak Street Salon | Pro | $60 | Paid | Oct 29 |
| ORD-1044 | Maple Auto Care | Starter | $30 | Pending | Oct 30 |
| ORD-1045 | Bluebird Café | Business | $120 | Paid | Nov 1 |
| ORD-1046 | Summit Gym | Pro | $60 | Failed | Nov 1 |
| ORD-1047 | Pine Valley Vet | Starter | $30 | Paid | Nov 2 |
| ORD-1048 | Cedar Hardware | Business | $120 | Paid | Nov 3 |
| ORD-1049 | Lakeview Florist | Starter | $30 | Pending | Nov 3 |
02 · React useState + useMemo
Sortable & filterable product table
Click a column to sort. Filter with the category chips or the search box. It all happens on this page — nothing is sent away.
| Brass Keychain | Gifts | $14 | 120 |
| Ceramic Mug Set | Home | $28 | 42 |
| Desk Plant Kit | Home | $32 | 25 |
| Leather Tote | Bags | $89 | 12 |
| Linen Apron | Apparel | $45 | 19 |
| Soy Candle Trio | Home | $36 | 67 |
| Tea Sampler | Food | $22 | 54 |
| Wool Beanie | Apparel | $24 | 8 |
8 of 8 products · demo data only
03 · Semantic table + Lucide checks
Feature comparison matrix
A plan grid with checks for what is included and a dot where it is not. This sample is not a live offer.
| Feature | Starter | Pro | Business |
|---|---|---|---|
| Own Docker container | |||
| Isolated Postgres DB | |||
| SFTP file access | |||
| Custom domain | |||
| Priority support | |||
| Daily backups |
Illustrative plan matrix — not a live offer.
04 · Tailwind responsive variants
Cards on phone, table on desktop
Same people, two layouts. On a phone you get stacked cards. On a wider screen you get a table. No sideways scroll required on a phone.
Ava Chen
Owner
ava@example.com
Cincinnati
Marcus Lee
Manager
marcus@example.com
Columbus
Sofia Ruiz
Designer
sofia@example.com
Dayton
Jordan Blake
Support
jordan@example.com
Remote
| Name | Role | Location | |
|---|---|---|---|
| Ava Chen | Owner | ava@example.com | Cincinnati |
| Marcus Lee | Manager | marcus@example.com | Columbus |
| Sofia Ruiz | Designer | sofia@example.com | Dayton |
| Jordan Blake | Support | jordan@example.com | Remote |
Resize wider (or open on desktop) to see the table layout.
05 · Motion layout + AnimatePresence
Animated reorder & filter list
Shuffle or filter the checklist and the rows spring into place. Tap a box to mark it done. Reduced motion updates instantly.
- Photograph storefront
- Write hours & contact
- Pick brand colors
- Send logo files
- Review homepage draft
06 · CSS gradient rail + ordered list
Vertical process timeline
A numbered rail for how a project moves along. It works under a headline or next to a contact button.
- 1
Discovery call
Day 1
We learn about your business, customers, and the sites you like.
- 2
Mood & structure
Day 3
You approve colors, fonts, and a simple page outline.
- 3
First draft
Week 1
A working homepage appears — review it on your phone.
- 4
Polish & launch
Week 2
Tweaks, photos, and HTTPS. Your link goes live.
07 · Motion height + aria-expanded
Expandable FAQ accordion
One answer open at a time. The height eases open, and the buttons work with a keyboard.
Yes. On a phone the list can become cards, keep a sticky header, or scroll sideways. This page shows those approaches.
08 · Motion layoutId + React state
Kanban-style tagged cards
Three columns: Ideas, Building, and Live. Move a card with the small buttons and it slides across. Nothing is saved.
Ideas2
Menu page with photos
foodgallery
Online booking widget
salonforms
Building2
Hours & directions
local
Gift card landing
retailcta
Live2
Homepage launch
live
Google Maps embed
local
09 · Motion page crossfade
Paginated news list
Five notes per page, with numbered controls. The page fades when it changes. Reduced motion skips the slide.
- Nov 01
Spring menu refresh · #1
Sample news item for a small-business site. Replace with real posts later.
- Nov 02
New hours for holidays · #2
Sample news item for a small-business site. Replace with real posts later.
- Nov 03
Staff spotlight · #3
Sample news item for a small-business site. Replace with real posts later.
- Nov 04
Parking update · #4
Sample news item for a small-business site. Replace with real posts later.
- Nov 05
Gift cards now available · #5
Sample news item for a small-business site. Replace with real posts later.
10 · CSS grid + highlight scale
Pricing table with featured column
Three sample columns, with one lifted as most popular. The buttons are demos only — they do not open a payment page or charge a card. HWHosting’s own price is $30 a month.
Most popular
Pro
Growing shops that need more
$60/mo
- Everything in Starter
- Extra pages
- Photo gallery
- Priority edits
Demo button — no checkout
Business
Multi-location or heavier needs
$120/mo
- Everything in Pro
- 2 locations
- Monthly content help
- Phone check-ins
Demo button — no checkout
Want any of this on your site?
Tell us which parts you like. $30/month. We build it, we host it, you're in business. Email support@hwhosting.com.