Rounded canvas preview (and other small tweaks)

app/components/ascii-preview.tsx

@@ -331,7 +331,7 @@ export function AsciiPreview({
           </div>
         )}
         <div
-          className="duration-50 relative transform-gpu transition-transform ease-out"
+          className="duration-50 relative transform-gpu overflow-hidden rounded-[1%] transition-transform ease-out"
           style={{
             transform: isExporting
               ? 'none'

app/components/export-options.tsx

@@ -112,21 +112,20 @@ export function ExportOptions({ settings, updateSettings }: ExportOptionsProps)
       <div className="dedent">
         <div className="flex gap-2">
           <InputText
-            value={flipped ? settings.backgroundColor : settings.textColor}
+            value={flipped ? settings.textColor : settings.backgroundColor}
             onChange={(val) =>
-              handleCustomColorSetChange(flipped ? 'backgroundColor' : 'textColor', val)
+              handleCustomColorSetChange(flipped ? 'textColor' : 'backgroundColor', val)
             }
           >
-            {flipped ? 'BG color' : 'Text color'}
+            {flipped ? 'Text color' : 'BG color'}
           </InputText>
-
           <InputText
-            value={flipped ? settings.textColor : settings.backgroundColor}
+            value={flipped ? settings.backgroundColor : settings.textColor}
             onChange={(val) =>
-              handleCustomColorSetChange(flipped ? 'textColor' : 'backgroundColor', val)
+              handleCustomColorSetChange(flipped ? 'backgroundColor' : 'textColor', val)
             }
           >
-            {flipped ? 'Text color' : 'BG color'}
+            {flipped ? 'BG color' : 'Text color'}
           </InputText>
         </div>
         <InputSwitch checked={flipped} onChange={handleFlipColors}>

app/templates.ts

@@ -56,8 +56,8 @@ export const TEMPLATES = {
     meta: { name: 'Sin' },
     source: { data: null, code: sin },
     animation: {
-      animationLength: 900,
-      frameRate: 15,
+      animationLength: 100,
+      frameRate: 30,
     },
   },
   custom: { ...DEFAULT_SETTINGS, meta: { name: 'Custom Project' } },