# Graphic Design

> GO BACK Graphic Design 88.2 the Zoo logo design & branding showcase(click on cassette case) 9thball logo design & clothes design(click on clothes rack) 88.2 the Zoo logo design & branding showcase(click on cassette case) 9thball logo design & clothes…
> URL: https://jackperrizo.com/graphic-design/
> Last modified: 2026-07-05T00:36:58+00:00

[**			
									GO BACK](https://jackperrizo.com/portfolio/)
				
								
				
				
				
							
			
		
						
				
				
				
					
## Graphic Design

				
				
				
				
							
			
		
						
				
					
				
		
					
		[](https://jackperrizo.com/portfolio/88-2-the-zoo/)
		
				
				
					
## 88.2 the Zoo

				
				
				
				
									logo design & branding showcase
(click on cassette case)

								
				
				
				
							
			
						
		
						
				
				
				
							
			
		
						
				
				
				
					
## 9thball

				
				
				
				
									logo design & clothes design
(click on clothes rack)

								
				
				
				
							
			
						
		
						
				
				
					
				
		
		
				
				
					
## 88.2 the Zoo

				
				
				
				
									logo design & branding showcase
(click on cassette case)

								
				
				
				
							
			
		
						
				
				
				
					
## 9thball

				
				
				
				
									logo design & clothes design
(click on clothes rack)

								
				
				
				
				
							
			
		
						
				
				
				
					
    [](https://jackperrizo.com/portfolio/9thball/)

:root {
    /* POSITIONING */
    --n9-master-pos: 55%; 
    --n9-gap: 5.5%; 
    
    /* SPEED GRADIENT (Inward to Outward) */
    /* Higher numbers = Slower motion */
    --n9-s1-speed: 2.5s; 
    --n9-s2-speed: 2.8s; 
    --n9-s3-speed: 3.5s; 
    --n9-s4-speed: 4.5s; /* The leader pulls away fastest */
}

/* 1. FULL-SCREEN BREAKOUT */
/* This trick forces the element to span 100vw even if nested in a box */
.ninthball-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.ninthball-link {
    text-decoration: none;
    display: block;
    cursor: pointer;
}

/* 2. THE STAGE (Maintaining Proportions at any scale) */
.ninthball-container {
    position: relative;
    width: 100%;
    padding-top: 35.5%; /* Calculated for your 2816px asset ratio */
    overflow: hidden;
    background: transparent;
}

/* 3. ASSETS (Always 100% of the viewport width) */
.ninthball-bar, .hanger {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.ninthball-bar { z-index: 1; }

.hanger {
    pointer-events: none;
    transform-origin: 50% 10%;
    transform: translateX(-100%);
    opacity: 0;
    /* Smooth Power 4 Curve */
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    transition-property: transform, opacity;
}

/* 4. Z-INDEX & BRIGHTNESS */
.ninthball-trigger { z-index: 20; opacity: 1; transform: translateX(var(--n9-master-pos)); filter: brightness(1); }
.n9-slide-1 { z-index: 19; filter: brightness(0.94); transition-duration: var(--n9-s1-speed), 0.8s; }
.n9-slide-2 { z-index: 18; filter: brightness(0.88); transition-duration: var(--n9-s2-speed), 0.8s; }
.n9-slide-3 { z-index: 17; filter: brightness(0.82); transition-duration: var(--n9-s3-speed), 0.8s; }
.n9-slide-4 { z-index: 16; filter: brightness(0.75); transition-duration: var(--n9-s4-speed), 0.8s; }

/* 5. HOVER ACTIVATION (All start at once) */
.ninthball-link:hover .hanger { opacity: 1; }

.ninthball-link:hover .n9-slide-1 { transform: translateX(calc(var(--n9-master-pos) - (var(--n9-gap) * 1))); }
.ninthball-link:hover .n9-slide-2 { transform: translateX(calc(var(--n9-master-pos) - (var(--n9-gap) * 2))); }
.ninthball-link:hover .n9-slide-3 { transform: translateX(calc(var(--n9-master-pos) - (var(--n9-gap) * 3))); }
.ninthball-link:hover .n9-slide-4 { transform: translateX(calc(var(--n9-master-pos) - (var(--n9-gap) * 4))); }

/* 6. THE SETTLE SWING 
   Since they slide at different speeds, the swing starts 
   when the "leader" (Slide 4) begins to settle.
*/
.ninthball-link:hover .hanger {
    animation: n9-full-swing 3.2s ease-in-out 1.4s forwards;
}

@keyframes n9-full-swing {
    0% { transform: translateX(inherit) rotate(0deg); }
    30% { transform: translateX(inherit