> ## Documentation Index
> Fetch the complete documentation index at: https://lib.hao.vc/llms.txt
> Use this file to discover all available pages before exploring further.

# READ THIS NO MATTER WHAT, SERIOUSLY!!!

> A couple of warnings before you start

export const Contributors = ({contributors}) => <div style={{
  display: 'grid',
  gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
  gap: '2rem',
  padding: '2rem 0',
  perspective: '1000px'
}}>
        {contributors.map((contributor, index) => <div key={index} style={{
  position: 'relative',
  background: 'rgba(20, 20, 25, 0.6)',
  backdropFilter: 'blur(10px)',
  borderRadius: '20px',
  padding: '2rem',
  transition: 'all 0.6s cubic-bezier(0.23, 1, 0.32, 1)',
  transformStyle: 'preserve-3d',
  cursor: 'pointer',
  overflow: 'visible',
  border: '1px solid rgba(0, 204, 139, 0.2)',
  boxShadow: '0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05)'
}} onMouseEnter={e => {
  e.currentTarget.style.transform = 'translateY(-15px) scale(1.02)';
  e.currentTarget.style.boxShadow = '0 25px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 204, 139, 0.4)';
  e.currentTarget.style.borderColor = 'rgba(0, 204, 139, 0.6)';
  const badge = e.currentTarget.querySelector('.badge');
  if (badge) {
    badge.style.opacity = '1';
    badge.style.transform = 'translateY(0) scale(1)';
  }
  const img = e.currentTarget.querySelector('.contributor-img');
  if (img) {
    img.style.borderColor = 'rgba(0, 204, 139, 0.8)';
    img.style.boxShadow = '0 0 40px rgba(0, 204, 139, 0.6)';
    img.style.transform = 'scale(1.05)';
  }
  const nameEl = e.currentTarget.querySelector('.name');
  if (nameEl) {
    nameEl.style.color = '#00CC8B';
    nameEl.style.textShadow = '0 0 20px rgba(0, 204, 139, 0.5)';
  }
  const descEl = e.currentTarget.querySelector('.desc');
  if (descEl) {
    descEl.style.color = 'rgba(255, 255, 255, 0.95)';
  }
}} onMouseLeave={e => {
  e.currentTarget.style.transform = 'translateY(0) scale(1)';
  e.currentTarget.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05)';
  e.currentTarget.style.borderColor = 'rgba(0, 204, 139, 0.2)';
  const badge = e.currentTarget.querySelector('.badge');
  if (badge) {
    badge.style.opacity = '0';
    badge.style.transform = 'translateY(-10px) scale(0.9)';
  }
  const img = e.currentTarget.querySelector('.contributor-img');
  if (img) {
    img.style.borderColor = 'rgba(0, 204, 139, 0.3)';
    img.style.boxShadow = '0 0 30px rgba(0, 204, 139, 0.3)';
    img.style.transform = 'scale(1)';
  }
  const nameEl = e.currentTarget.querySelector('.name');
  if (nameEl) {
    nameEl.style.color = '#ffffff';
    nameEl.style.textShadow = 'none';
  }
  const descEl = e.currentTarget.querySelector('.desc');
  if (descEl) {
    descEl.style.color = 'rgba(255, 255, 255, 0.65)';
  }
}}>
                <div className="badge" style={{
  position: 'absolute',
  top: '1rem',
  right: '1rem',
  background: 'linear-gradient(135deg, #00CC8B 0%, #15803D 100%)',
  padding: '0.5rem 1rem',
  borderRadius: '50px',
  fontSize: '0.75rem',
  fontWeight: '600',
  textTransform: 'uppercase',
  letterSpacing: '1px',
  opacity: '0',
  transform: 'translateY(-10px) scale(0.9)',
  transition: 'all 0.6s cubic-bezier(0.23, 1, 0.32, 1)',
  boxShadow: '0 5px 15px rgba(0, 204, 139, 0.4)',
  color: 'white',
  zIndex: 10
}}>
                    {index === 0 ? '🏆 The Greatest Contributor EVER' : `#${index + 1} Contributor`}
                </div>

                <div style={{
  position: 'relative',
  width: '120px',
  height: '120px',
  margin: '0 auto 1.5rem',
  transition: 'all 0.6s cubic-bezier(0.23, 1, 0.32, 1)'
}}>
                    <img className="contributor-img" src={contributor.picture} alt={contributor.name} style={{
  width: '100%',
  height: '100%',
  borderRadius: '50%',
  objectFit: 'cover',
  border: '4px solid rgba(0, 204, 139, 0.3)',
  position: 'relative',
  zIndex: 1,
  transition: 'all 0.4s ease',
  boxShadow: '0 0 30px rgba(0, 204, 139, 0.3)',
  transform: 'scale(1)'
}} />
                </div>

                <div style={{
  textAlign: 'center',
  transition: 'all 0.6s cubic-bezier(0.23, 1, 0.32, 1)'
}}>
                    <h3 className="name" style={{
  fontSize: '1.5rem',
  fontWeight: '700',
  marginBottom: '0.5rem',
  color: '#ffffff',
  transition: 'all 0.4s ease',
  textShadow: 'none'
}}>
                        {contributor.name}
                    </h3>
                    <p className="desc" style={{
  fontSize: '0.95rem',
  lineHeight: '1.6',
  color: 'rgba(255, 255, 255, 0.65)',
  margin: 0,
  transition: 'all 0.4s ease'
}}>
                        {contributor.description}
                    </p>
                </div>
            </div>)}
    </div>;

## Important considerations before you start

* **This is a work in progress project, please don't expect it to be perfect**

* **The API is not yet stable, please make sure you lock the version of the library before using it in production**

* **haolib IS already used in production by [hao.vc](https://hao.vc), so you do not need to worry about the risk of the project being abandoned.
  The problem is exactly the opposite: it is too new and we are still adding new features, fixing bugs and changing the API.**

If you are ok with the above, let's get started!

## Top contributors

<Contributors
  contributors={
[
{
  name: 'HAO',
  picture: '/hao.png',
  description: 'HAO cat, the avatar of HAO.VC'
}
,
{
  name: 'Kamil Biktimirov',
  picture: 'https://hao.vc/assets/kamil-biktimirov-TG-oknG-.jpg',
  description: 'CTO and Co-founder of hao.vc; Some Kind Of Programmers Founder; The creator and maintainer of haolib'
}
]
}
/>