feat: Add Cinematic Mode (SSAO) renderer and UI toggle

Author: AmirMohammad Cheraghali

src/App.tsx

@@ -42,6 +42,7 @@ function App() {
 
   // Presentation State
   const [isSpinning, setIsSpinning] = useState(initialUrlState.isSpinning || false);
+  const [isCinematic, setIsCinematic] = useState(false);
   const [isCleanMode, setIsCleanMode] = useState(false);
   const [showContactMap, setShowContactMap] = useState(false);
 
@@ -462,6 +463,8 @@ function App() {
         onDeleteMovie={handleDeleteMovie}
         isSpinning={isSpinning}
         setIsSpinning={setIsSpinning}
+        isCinematic={isCinematic}
+        setIsCinematic={setIsCinematic}
         isCleanMode={isCleanMode}
         setIsCleanMode={setIsCleanMode}
         onSaveSession={handleSaveSession}
@@ -488,6 +491,7 @@ function App() {
         showSurface={showSurface}
         showLigands={showLigands}
         isSpinning={isSpinning}
+        isCinematic={isCinematic}
 
         className="w-full h-full"
       />

src/components/Controls.tsx

@@ -62,6 +62,8 @@ interface ControlsProps {
     onDeleteSnapshot: (id: string) => void;
     isSpinning: boolean;
     setIsSpinning: (spinning: boolean) => void;
+    isCinematic: boolean;
+    setIsCinematic: (cinematic: boolean) => void;
     isCleanMode: boolean;
     setIsCleanMode: (clean: boolean) => void;
     onSaveSession: () => void;
@@ -107,6 +109,8 @@ export const Controls: React.FC<ControlsProps> = ({
     onDeleteSnapshot,
     isSpinning,
     setIsSpinning,
+    isCinematic,
+    setIsCinematic,
     isCleanMode,
     setIsCleanMode,
     onSaveSession,
@@ -398,6 +402,14 @@ export const Controls: React.FC<ControlsProps> = ({
                                 <RefreshCw className={`w-3 h-3 ${isSpinning ? 'animate-spin' : ''}`} />
                             </button>
                         </div>
+                        <button
+                            onClick={() => setIsCinematic(!isCinematic)}
+                            className={`flex items-center justify-between px-3 py-2 rounded-lg border transition-all ${isCinematic ? 'bg-purple-500/10 border-purple-500 text-purple-500' : `${cardBg} opacity-80 hover:opacity-100`}`}
+                        >
+                            <span className="text-xs font-medium">Cinematic</span>
+                            <div className={`w-2 h-2 rounded-full ${isCinematic ? 'bg-purple-500 animate-pulse' : 'bg-neutral-500'}`} />
+                        </button>
+
 
                         {/* Style & Color Dropdowns */}
                         <div className="space-y-1.5">

src/components/ProteinViewer.tsx

@@ -44,6 +44,7 @@ interface ProteinViewerProps {
     showLigands?: boolean;
     isSpinning?: boolean;
     isMeasurementMode?: boolean;
+    isCinematic?: boolean;
 }
 
 export interface ProteinViewerRef {
@@ -86,8 +87,9 @@ export const ProteinViewer = forwardRef<ProteinViewerRef, ProteinViewerProps>(({
     showLigands = false,
     isSpinning = false,
     isMeasurementMode = false,
+    isCinematic = false
+}: ProteinViewerProps, ref: React.Ref<ProteinViewerRef>) => {
 
-}, ref) => {
     const containerRef = useRef<HTMLDivElement>(null);
     const stageRef = useRef<any>(null);
     const componentRef = useRef<any>(null);
@@ -884,6 +886,31 @@ export const ProteinViewer = forwardRef<ProteinViewerRef, ProteinViewerProps>(({
         }
     }, [backgroundColor]);
 
+    // Handle Cinematic Mode
+    useEffect(() => {
+        if (stageRef.current) {
+            if (isCinematic) {
+                // High Quality "Studio" Settings
+                stageRef.current.setParameters({
+                    ambientOcclusion: true,
+                    ambientShadow: true,
+                    ambientIntensity: 1.0,
+                    lightIntensity: 0.8,
+                    sampleLevel: 3 // High quality sampling
+                });
+            } else {
+                // Standard Performance Settings
+                stageRef.current.setParameters({
+                    ambientOcclusion: false,
+                    ambientShadow: false, // Turn off for speed
+                    ambientIntensity: 0.2,
+                    lightIntensity: 1.0,
+                    sampleLevel: 0
+                });
+            }
+        }
+    }, [isCinematic]);
+
     useEffect(() => {
         isMounted.current = true;
         return () => { isMounted.current = false; };