PhongPham
c65cc97a33
✨ MAJOR FEATURES: • Auto-zoom intelligence với smart bounds fitting • Enhanced 3D GPS markers với pulsing effects • Professional route display với 6-layer rendering • Status-based parking icons với availability indicators • Production-ready build optimizations 🗺️ AUTO-ZOOM FEATURES: • Smart bounds fitting cho GPS + selected parking • Adaptive padding (50px) cho visual balance • Max zoom control (level 16) để tránh quá gần • Dynamic centering khi không có selection 🎨 ENHANCED VISUALS: • 3D GPS marker với multi-layer pulse effects • Advanced parking icons với status colors • Selection highlighting với animation • Dimming system cho non-selected items 🛣️ ROUTE SYSTEM: • OpenRouteService API integration • Multi-layer route rendering (glow, shadow, main, animated) • Real-time distance & duration calculation • Visual route info trong popup 📱 PRODUCTION READY: • SSR safe với dynamic imports • Build errors resolved • Global deployment via Vercel • Optimized performance 🌍 DEPLOYMENT: • Vercel: https://whatever-ctk2auuxr-phong12hexdockworks-projects.vercel.app • Bundle size: 22.8 kB optimized • Global CDN distribution • HTTPS enabled 💾 VERSION CONTROL: • MapView-v2.0.tsx backup created • MAPVIEW_VERSIONS.md documentation • Full version history tracking
106 lines
3.9 KiB
Markdown
106 lines
3.9 KiB
Markdown
<p align="center">
|
||
<img src="https://framerusercontent.com/images/48ha9ZR9oZQGQ6gZ8YUfElP3T0A.png" width="50" height="50" alt="Framer Motion Icon" />
|
||
</p>
|
||
<h1 align="center">Framer Motion</h1>
|
||
<h3 align="center">
|
||
An open source motion library for React, made by Framer.
|
||
</h3>
|
||
<h3 align="center">
|
||
Motion powers Framer, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed.
|
||
</h3>
|
||
<br/>
|
||
<p align="center">
|
||
<a href="https://www.framer.com?utm_source=motion-readme">
|
||
<img src="https://framerusercontent.com/images/atXqxn4JhKm4LXVncdNjkKV7yCU.png" width="140" alt="Start for free" />
|
||
</a>
|
||
</p>
|
||
<br/>
|
||
<p align="center">
|
||
<a href="https://www.framer.com?utm_source=motion-readme">
|
||
<img src="https://framerusercontent.com/images/pMSOmGP2V8sSaZRV2D7i4HTBTe4.png" width="1000" alt="Framer Banner" />
|
||
</a>
|
||
</p>
|
||
|
||
<br>
|
||
|
||
<p align="center">
|
||
<a href="https://www.npmjs.com/package/framer-motion" target="_blank">
|
||
<img src="https://img.shields.io/npm/v/framer-motion.svg?style=flat-square" />
|
||
</a>
|
||
<a href="https://www.npmjs.com/package/framer-motion" target="_blank">
|
||
<img src="https://img.shields.io/npm/dm/framer-motion.svg?style=flat-square" />
|
||
</a>
|
||
<a href="https://twitter.com/framer" target="_blank">
|
||
<img src="https://img.shields.io/twitter/follow/framer.svg?style=social&label=Follow" />
|
||
</a>
|
||
<a href="https://discord.gg/DfkSpYe" target="_blank">
|
||
<img src="https://img.shields.io/discord/308323056592486420.svg?logo=discord&logoColor=white" alt="Chat on Discord">
|
||
</a>
|
||
</p>
|
||
|
||
<br>
|
||
<hr>
|
||
<br>
|
||
|
||
Framer Motion is an open source, production-ready library that’s designed for all creative developers.
|
||
|
||
It looks like this:
|
||
|
||
```jsx
|
||
<motion.div animate={{ x: 0 }} />
|
||
```
|
||
|
||
It does all this:
|
||
|
||
- [Springs](https://www.framer.com/docs/transition/#spring?utm_source=motion-readme-docs)
|
||
- [Keyframes](https://www.framer.com/docs/animation/##keyframes?utm_source=motion-readme-docs)
|
||
- [Layout animations](https://www.framer.com/docs/layout-animations/?utm_source=motion-readme-docs)
|
||
- [Shared layout animations](https://www.framer.com/docs/layout-animations/#shared-layout-animations?utm_source=motion-readme-docs)
|
||
- [Gestures (drag/tap/hover)](https://www.framer.com/docs/gestures/?utm_source=motion-readme-docs)
|
||
- [Scroll animations](https://www.framer.com/docs/scroll-animations?utm_source=motion-readme-docs)
|
||
- [SVG paths](https://www.framer.com/docs/component/###svg-line-drawing?utm_source=motion-readme-docs)
|
||
- [Exit animations](https://www.framer.com/docs/animate-presence/?utm_source=motion-readme-docs)
|
||
- Server-side rendering
|
||
- [Hardware-accelerated animations](https://www.framer.com/docs/animation/#hardware-accelerated-animations?utm_source=motion-readme-docs)
|
||
- [Orchestrate animations across components](https://www.framer.com/docs/animation/##orchestration?utm_source=motion-readme-docs)
|
||
- [CSS variables](https://www.framer.com/docs/component/##css-variables?utm_source=motion-readme-docs)
|
||
|
||
...and a whole lot more.
|
||
|
||
## Get started
|
||
|
||
### 🐇 Quick start
|
||
|
||
Install `framer-motion` with via your package manager:
|
||
|
||
```
|
||
npm install framer-motion
|
||
```
|
||
|
||
Then import the `motion` component:
|
||
|
||
```jsx
|
||
import { motion } from "framer-motion"
|
||
|
||
export const MyComponent = ({ isVisible }) => (
|
||
<motion.div animate={{ opacity: isVisible ? 1 : 0 }} />
|
||
)
|
||
```
|
||
|
||
### 📚 Docs
|
||
|
||
- Check out [our documentation](https://www.framer.com/docs/?utm_source=motion-readme-docs) for guides and a full API reference.
|
||
- Or see [our examples](https://www.framer.com/docs/examples/?utm_source=motion-readme-docs) for inspiration.
|
||
|
||
### 💎 Contribute
|
||
|
||
- Want to contribute to Framer Motion? Our [contributing guide](https://github.com/framer/motion/blob/master/CONTRIBUTING.md) has you covered.
|
||
|
||
### 👩🏻⚖️ License
|
||
|
||
- Framer Motion is MIT licensed.
|
||
|
||
### ✨ Framer
|
||
|
||
- Design and publish sites that inspire. [Try Framer for free](https://www.framer.com/?utm_source=motion-readme).
|